Guide on Using Responsive HTML5 Ideal Forms with jQuery
Web developers always look for already built-in web forms to download to use them on their projects to save time for backend coding. Developers core focus is always on backend rather than frontend. So, today I came across Ideal Forms library that web developers wanna use in their on-going projects to save time.
Idea 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+. Demo has been removed from GitHub for some reasons but you can still download the ideal forms from github and download link is provided below.
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.jsplugin - Load
css/jquery.idealforms.cssstylesheet - 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.