wpf: Awesome Forms Collection (Forms)

dimanche 25 octobre 2015

Awesome Forms Collection (Forms)

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.

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 -->

Instruction

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
Grid system
Animated tooltips
50+ Useful Examples
Retina Support Optimized to support the high quality and crisp graphics on retina screens.
HTML5 and CSS3
Cross-Browser Tested on Windows (Chrome, Firefox, Opera, IE8, IE9, IE10), Mac (Safari, Chrome, Firefox, Opera), iOS (iPhone, iPad) and Android.
Documentation Extensive step-by-step guide to help you with usage and customization.

Credits

Support

If you have any suggestions or you find a problem, call me ASAP! i’m eager to get suggestions and ready to solve bugs!

via Chebli Mohamed

wpf