Awesome Forms Collection Free Download

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="">                             <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
  • 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.



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