Ideal Forms is an ultimate framework for building and validating responsive HTML5 forms. Using Ideal Forms script we can build responsive forms like contact, registration forms. It’s built with HTML5,  Jquery 1.7+ UI 1.8+ and supported in IE8+, Webkit, Firefox, Opera, iOS 5+, Android 4.0+. You can see a demo of this script right by clicking the button DEMO.

[aio_button align=”center” animation=”pulse” color=”blue” size=”small” icon=”zoom-in” text=”Demo” target=”_blank” url=””]

Jquery Ideal Forms

However, main key features by this script as follows:

Key Features

  • It’s fully responsive
  • The input types can be customized such as select, ratio, file and checkbox
  • It uses custom date picker using jQuery UI
  • On the spot validation
  • Localization

Video Tutorials

Manual Setup

First of all, download the script from Github. Secondly, upload it to your webhost and try creating a new html file whatever you call it (ideal-forms.html). Afterwards, load the following scripts between section, using html script tag..

  • Load jQuery library
  • Load js/min/jquery.idealforms.min.js plugin
  • Load css/jquery.idealforms.css stylesheet
  • Load jQuery UI for datepicker support

Here, replace the <html> tag from your html file with:

<!--[if IE 8]> <html class="ie8" lang="en"> <![<span class="hiddenSpellError" pre="">endif</span>]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![<span class="hiddenSpellError" pre="">endif</span>]-->
<!--[if (gt IE 9)|!(IE)]><!-->  <!--<![<span class="hiddenSpellError" pre="">endif</span>]-->

Now load the HTML5 Shim for IE8 unless you’re using Modernizr which already has a shim. To localize the form in your language you can easily load the file js/i18n. And now try calling the ideal forms on each form separately by using the follow parameter.

var $myform = $('#my-form').idealforms({ options }).data('idealforms');

Now, simply markup the page by following this link. Just paste the markup into the html file and try browsing that html page. Yep, it’s done.