Awesome Forms Collection

Featured Products

WOOBE - WooCommerce Bulk Editor Professional

WOOT - WooCommerce Active Products Tables

TABLEON - WordPress Post Tables Filterable

Awesome Forms Collection

By : themesaller Published on Monday, October 26, 2015,00:17:06 in JavaScript Scripts

Screenshots

Demo

Buy (10 $)

10 $

When you open the SOURCE folder, you will find 4 folders ( Demo-one, Demo-two, Demo-three and new-demo ), each of these folder represent a style, each style has its different themes.

Instruction

HTML Structure

<head>

        <link rel="stylesheet" type="text/css"  href="css/themesaller-forms.css">
        <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">

</head>

JavaScript Structure

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>

Form elements markup

A simple contact form has markup that looks like below!


    <div class="themesaller-wrap">
        <div class="themesaller-forms wrap-3">

          <div class="form-header header-primary">
                <h4><i class="fa fa-comments"></i>Get in touch</h4>
          </div><!-- end .form-header section -->

            <form method="post" action="/" id="contact">
                <div class="form-body">

                    <div class="section">
                        <label for="names" class="field-label">Your Personal Names</label>
                        <label for="names" class="field prepend-icon">
                            <input type="text" name="names" id="names" class="gui-input" placeholder="Enter name...">
                            <label for="names" class="field-icon"><i class="fa fa-user"></i></label>  
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="email" class="field-label">Your Email Address</label>
                        <label for="email" class="field prepend-icon">
                            <input type="email" name="email" id="email" class="gui-input" placeholder="example@domain.com...">
                            <label for="email" class="field-icon"><i class="fa fa-envelope"></i></label>  
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="telephone" class="field-label">Telephone / Mobile </label>
                        <label for="telephone" class="field prepend-icon">
                            <input type="tel" name="telephone" id="telephone" class="gui-input" placeholder="Enter telephone...">
                            <label for="telephone" class="field-icon"><i class="fa fa-phone-square"></i></label>  
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="comment" class="field-label">Message / Comment </label>
                        <label for="comment" class="field prepend-icon">
                            <textarea class="gui-textarea" id="comment" name="comment"></textarea>
                            <label for="comment" class="field-icon"><i class="fa fa-comments"></i></label>
                            <span class="input-hint"> <strong>Hint:</strong> Please enter between 80 - 300 characters.</span>   
                        </label>
                    </div><!-- end section -->                                                                      

                </div><!-- end .form-body section -->
                <div class="form-footer">
                    <button type="submit" class="button btn-primary">Submit</button>
                </div><!-- end .form-footer section -->
            </form>

        </div><!-- end .themesaller-forms section -->
    </div><!-- end .themesaller-wrap section -->

Main features

Highly Customized Contains large amount of customized elements: text inputs, file inputs, selects, multiple selects, textareas, radios, checkboxes, and buttons.

Modern Elements

Client-side Validation

Fields Masking

Ajax Powered

File Uploading

Modal Forms

MultiStep Forms

jQuery UI Slider

jQuery UI Datepicker

jQuery UI Time Picker

jQuery UI Month Picker

Responsive Design