Integrate Caspio with My own Form Design HTML/CSS

DanielSepe · June 21, 2016

Is there any way that a caspio form can grab certain classes that I have defined outside of caspio? For example, I assign a specific class to my submit button, but I define that class on my html file outside of caspio. How can I get that element to access the class defined outside?

I ask this because I am trying to create a multi-page form with a lot of css to define colors, shapes, and backgrounds; and defining all that within Caspio seems quite troublesome. Heres a screenshot of how it should look in the end.

MayMusic · June 21, 2016

If you remove the style classes from Caspio stylesheet this DataPage is based on then it should inherit the style from the container. Try to create a copy of the style this page is using and then under source remove all classes. Apply it yo your page

DanielSepe · June 22, 2016

Thanks but i still don't get it.

this is a copy of the sample form:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
   <meta name="author" content="Insidelab - Designer Studio and Front-end Web Developer">
       <meta name="description" content="Contact Framework is a beautiful Lightweight Contact Framework for your Website">
       <meta name="keywords" content="Contact Framework, Multi Contact Framework, Colors, Multi Themes, Responsive, Mobile">
<title>Contact Framework</title>

       
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="shortcut icon" type="image/png" href="images/favicon.png">

       
       <link rel="stylesheet" type="text/css" href="css/structure.css">
       <link rel="stylesheet" type="text/css" href="css/themes/flat/settings.css">
       <link rel="stylesheet" type="text/css" href="css/themes/flat/theme.css">
       <link rel="stylesheet" type="text/css" href="css/responsive.css">

       
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,700,900|Raleway:400,700|PT+Sans|Open+Sans">

</head>

<body>

<div class="container container-fixed">
       <div class="form-bar">
               <div class="top-bar bar-green"></div>
               <div class="top-bar bar-orange"></div>
               <div class="top-bar bar-yellow"></div>
               <div class="top-bar bar-red"></div>
               <div class="top-bar bar-purple"></div>
               <div class="top-bar bar-pink"></div>
               <div class="top-bar bar-blue-dark"></div>
               <div class="top-bar bar-blue"></div>
           </div>
       <div class="form form-flat form-blue-flat form-light-flat">
           <div class="pre-header"></div>
               <div class="pre-header-description">
                   <div class="company-holder">
                       <div class="company-border">
                           <div class="company-logo"></div>
                       </div>
                   </div>
                   <div class="company-description">
                       <h4>InsideLab Support Center</h4>
                       <p><i class="icon-twitter"></i>TWITTER :</p>
                       <a href="#">@PSBM_MU</a>
                   </div>
               </div>
               <div class="grid-container">
                   <div class="column twelve">
                       <div class="arrow"></div>
                   </div>
               </div>
               <div class="header">
                   <div class="grid-container">
               <div class="column twelve">
                           <h4>WELCOME</h4>
                           <p>Enter your information below in order to send us a Message</p>
                       </div>
                       <div class="column twelve">
                       <div class="language">
                               <a href="#"><img src="images/flags/Portugal.png"></a>
                               <a href="#"><img src="images/flags/United-Kingdom.png"></a>
                           </div>
                       </div>
               </div>
               </div>
               <div class="section">
                   <form method="post" action="#" id="contact" accept-charset="utf-8">
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="dividers">
                                   <div class="divider divider-nine"><p>First Name & Last Name</p></div>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column six">
                               <div class="input-group-right">
                                   <label for="firstname" class="group focus-group">
                                       <i class="icon-user3"></i>
                                       <input type="text" id="firstname" name="firstname" autocomplete="off" maxlength="30" class="input-right marginb10" placeholder="Enter your First Name">
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please enter your First Name only letters and spaces are Allowed"></div>
                                   </label>
                               </div>
                           </div>
                           <div class="column six">
                               <div class="input-group-right">
                                   <label for="lastname" class="group focus-group">
                                       <i class="icon-user3"></i>
                                       <input type="text" id="lastname" name="lastname" autocomplete="off" maxlength="30" class="input-right marginb10" placeholder="Enter your Last Name">
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please enter your Last Name only letters and spaces are Allowed"></div>
                                   </label>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="dividers">
                                   <div class="divider divider-nine"><p>Email Address</p></div>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="input-group-right">
                                   <label for="email" class="group focus-group">
                                       <i class="icon-envelop5"></i>
                                       <input type="email" id="email" name="email" autocomplete="off" maxlength="70" class="input-right marginb10" placeholder="Enter your Email">
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please enter your Email Address only letters, spaces and special Characteres are Allowed"></div>
                               </label>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="dividers">
                                   <div class="divider divider-nine"><p>Subject</p></div>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="input-group-right">
                                   <label for="subject" class="group focus-group">
                                       <i class="icon-bubble-check"></i>
                                       <input type="text" id="subject" name="subject" autocomplete="off" maxlength="50" class="input-right marginb10" placeholder="Enter your Subject">
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please enter your Subject only letters and spaces are Allowed"></div>
                                   </label>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="dividers">
                                   <div class="divider divider-nine"><p>Message</p></div>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="textarea-group-right">
                                   <label for="message" class="group focus-group">
                                       <i class="icon-file-text3"></i>
                                       <textarea rows="5" id="message" name="message" maxlength="160" class="textarea-right resisable marginb10" placeholder="Enter your Message"></textarea>
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please enter your Message only letters, Numbers, special Characteres and spaces are Allowed"></div>
                                   </label>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="dividers">
                                   <div class="divider divider-nine"><p>Select your Department</p></div>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve">
                               <div class="select-group">
                                   <label for="support" class="group focus-group custom-select">
                                       <select id="support" name="support" class="select marginb10">
                                           <option value="">Select your Option</option>
                                           <option value="General">General</option>
                                           <option value="Questions About Products">Questions About Products</option>
                                           <option value="Talk about Partnership">Talk about Partnership</option>
                                           <option value="Other">Other</option>
                                       </select>
                                       <div class="tooltip tooltip-info top-left fixed" data-tooltip="Please select your Option to Contact us"></div>
                                   </label>
                               </div>
                           </div>
                       </div>
                       <div class="grid-container">
                           <div class="column twelve margint10">
                               <div class="button-group">
                                   <button type="submit" id="contact-button" class="button button-large button-success marginb10">Send Message</button>
                                   <button type="reset" id="reset-button" class="button button-large button-error nomargin10">Reset Fields</button>
                               </div>
                           </div>
                       </div>
                   </form>
               </div>
<div class="footer">
               <div class="grid-container">
                       <div class="column twelve">
                           <p>Contact Framework © 2016 - All rights Reserved</p>
                           <p class="copyright"><i class="icon-lock2"></i>Insidelab Development</p>
                   </div>
                   </div>
               </div>
</div>
       </div>

</body>
</html>

Login

Integrate Caspio with My own Form Design HTML/CSS

Question

DanielSepe

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

MayMusic

Link to comment

Share on other sites

DanielSepe

Link to comment

Share on other sites

Join the conversation

Browse