Jump to content
  • 0

Integrate Caspio with My own Form Design HTML/CSS


DanielSepe
 Share

Question

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.

 

Screen Shot 2016-06-21 at 6.27.23 PM.png

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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>
        
        <!-- Viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <!-- Favicon -->
        <link rel="shortcut icon" type="image/png" href="images/favicon.png">
        
        <!-- Css Styles -->
        <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">
        
        <!-- Font Link -->
        <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 &copy; 2016 - All rights Reserved</p>
                            <p class="copyright"><i class="icon-lock2"></i>Insidelab Development</p>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
        
    </body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...