5 years ago, web developers and most programmers were forced to do tons of things in order to program accordingly a website, from the basic layout to defining all the different variables and actions that give life to the site. Developers often utilized JavaScript in some part of the process to facilitate the construction of many different webpages; though JS definitely helped out developers, there were still a lot of things that made them consume dozens of time and achieve minimal results.
But since the debut of the powerful framework jQuery, things changed forever. jQuery can be used for many things, from developing fancy animations to simply spice up ordinary designs that were previously difficult to do. On this article our attention focuses on forms, an essential part of any website and how jQuery can be truly resourceful for improving them both in terms of functionality and aesthetic; throughout this post you are about to see some of the most helpful plugins and tutorials that can give you some guide for working with forms.
Web forms are as essential for every webpage as ketchup for a cheeseburger, the issue is that for several years all the forms have displayed practically the same flavor and structure (this may be considered as an usability right-guess) and not many designers have proposed new styles and functions to these elements.
jQuery was created with the specific purpose of enhance the standard JavaScript faculties and help designers and developers generate prettier interfaces and web elements without spending hours working with code. The main concern of every developer when working with forms is make them as accessible and usable possible beyond the construction itself, because it’s very important that forms fulfill their role of helping exchange information with visitors, clients and people in general. We interact with forms almost every day while working with information, either if it is a login form, an online purchase, a registration form, etc. The important thing is that forms are always present and designers / developers must stop using default designs and scripts and start doing something extra with them.
Now that we have the power of jQuery in our hands, let’s see a complete list of examples on how to utilize this popular framework to do something really great with our forms.
Our top selection
Although every single plugin that’s been listed on this article can provide you a lot of help when working with forms, we decided to compile those plugins whose utility is truly helpful for any designer and developer and also present a complete support and documentation on how to use the plugin.
jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that validate client and server side and also processes without changing pages (using AJAX)
Form Wizard is a jQuery plugin that can be used for making wizard-like page flows for forms without having to reload the page between wizard steps. The plugin is unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form depending on the user input.
Formalize grants you control over forms without changing them so drastically to make them look foreign in a user’s operating system, this tool can be considered as a webkit version for forms elements, which makes it great to develop compliant interfaces.
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
With this helpful plugin, you will be able to place the ‘login’, ‘sign-up’ and ‘retrieve password’ windows in a single webpage.
An unobtrusive jQuery validation system that displays a very organized validation system in search of cleaning all the mess.
One of the most beautiful contact forms ever, this vintage typewriter can be implemented on your website as a jQuery plugin whose construction is explained on this tutorial.
A simple jQuery Plugin, used to scan through your website and automatically attach focus,blur and keydown effect on your form fields.
One of the most complete form-styling plugins, JQF1 is a good way of adding some cool format to the standard web forms that people often utilize on their web designs.
Why always using the same boring form designs if you can change them a little bit and make them look a thousand times better?.
Great jQuery plugin that can be helpful for accounting companies where people have to work with dates and phone numbers all the time, the plugin inserts all the default characters that must be entered in every occasion.
The jQuery.dForm plugin allows you to create your HTML forms with ease from JavaScript objects (and therefore JSON, too).
Fancy web form to insert in your site, the design remains simple and attractive while remaining a good structure and diagramming.
With FormLabels you can easily Insert subtle form hints whilst displaying a different and attractive form design.
The toChecklist plug-in for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.
Accessibility and functionality
On this section we like to list those jQuery plugins and tutorials whose main objective is to improve the accessibility and/or functionality of forms in more than one way. You will definitely find some pretty cool examples in this category that might be helpful to optimize your current forms and offer a better experience to your site’s visitors.
FlexBox is a jQuery plugin that pretends to be a very flexible replacement for HTML textboxes and dropdowns, using AJAX to retrieve and bind JSON data.
This plugin places a word hint into any form field so people can infer what they should type in the form.
Author: http://andreaslagerkvist.com/about/
Home Page: http://andreaslagerkvist.com/jquery/form-hints/
Demo: http://andreaslagerkvist.com/jquery/form-hints/#jquery-plugin-example
Useful trick that lets you divide a large contact form into several pages to save space and transfer times.
Author: http://cardonadesigns.com/wordpress/
Home Page: http://cardonadesigns.com/wordpress/2010/04/26/multi-page-form-using-jquery/
Demo: http://cardonadesigns.com/wordpress/thoughts/ajaxish.php#
This plugin inserts a series of buttons that helps people select the different objects of a web form.
Author: http://www.mkyong.com/
Home Page: http://www.mkyong.com/jquery/jquery-form-selectors-example/
Demo: http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-form-selector.html
On this page you will find a demonstration of a web spin-button control using a single textbox.
Author: http://www.softwareunity.com/
Home Page: http://www.softwareunity.com/jquery/JQuerySpinBtn/
Demo: http://www.softwareunity.com/jquery/JQuerySpinBtn/
One truly helpful resource that applies to everyone, from common people to programmers. What you will learn on this page is how to install a warning that saves you from leaving a page before submitting a form or similar cases.
Author: http://misterdai.wordpress.com/author/misterdai/
Home Page: http://misterdai.wordpress.com/2010/06/04/jquery-form-changed-warning/
Demo: http://jsbin.com/amecu3
A simple and fun exercise that displays a Twitter-like suggestion box like the one showed on the screenshot.
Author: http://www.enricofoschi.com/
Home Page: http://www.enricofoschi.com/jquery/twittersuggestion/
Demo: http://www.enricofoschi.com/jquery/twittersuggestion/
Just like Facebook’s growing boxes, this jQuery plugin makes your text boxes grow and shrink according to the amount of content existent.
Author: http://www.unwrongest.com/
Home Page: http://www.unwrongest.com/projects/elastic/
Demo: http://www.unwrongest.com/projects/elastic/#demo
Another useful hint plugin, this one displays a suggestion when there’s no content written inside the box.
Author: http://www.thesedays.com/
Home Page: http://labs.thesedays.com/projects/jquery/clearfield/
Demo: http://labs.thesedays.com/projects/jquery/clearfield/
Inspired by Twitter’s design, this dropdown box can certainly prettify the appearance of your designs.
Author: http://aext.net/author/prlamnguyen/
Home Page: http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
Demo: http://aext.net/example/twitterlogin/#
Many times we find ourselves facing huge checklist and there’s no other way that selecting one by one the elements that we need, now that’s over thanks to this great jQuery tutorial.
Author: http://twitter.com/chrisfree
Home Page: http://www.chromaticsites.com/blog/jquery-tutorial-selecting-multiple-select-form-elements-on-the-fly/
Demo: http://blog-media.chromaticsites.com/tutorials/jquery/0001_Select_Multiple_Option_Elements/index.html
Exactly as the title says, this link will show you how to utilize form labels as text field or text area values.
Author: http://cssglobe.com/
Home Page: http://cssglobe.com/post/2494/using-form-labels-as-text-field-values
Demo: http://cssglobe.com/lab/label2value/
Pretty jQuery plugin that displays a real-time preview of the comment that you’re about to send.
Author: http://davidwalsh.name/
Home Page: http://davidwalsh.name/jquery-comment-preview
Demo: http://davidwalsh.name/dw-content/jquery-live-preview.php
Many times when you’re filling a web form, either if it’s for leaving a comment or filling a registration, your network goes down and you lose your progress, well know with the information stored on this link you will no longer experience that issue.
Author: http://rikrikrik.com/
Home Page: http://rikrikrik.com/jquery/autosave/
Demo: http://rikrikrik.com/jquery/autosave/#examples
Another plugin inspired by Twitter, this one has the classical 140 character countdown that Twitter brought to the mainstream.
Author: http://tpgblog.com/noblecount/
Home Page: http://tpgblog.com/2010/03/23/noblecount-jquery-character-count-plugin/
Demo: http://theproductguy.com/noblecount/noblecount.demo.html
Working with passwords is something that needs to always be taken care of when working with web forms and this link is an example of it.
Author: http://www.prothemer.com/blog/author/byron/
Home Page: http://www.prothemer.com/blog/2009/07/02/new-jquery-plugin-targeting-usability-for-password-masking-on-forms/
Demo: http://www.prothemer.com/labs/jquery/showpassword/
These type of buttons are becoming very popular these days and thanks to this article you will be able to use them as well.
Author: http://widowmaker.kiev.ua/
Home Page: http://widowmaker.kiev.ua/checkbox/
Demo: http://widowmaker.kiev.ua/checkbox/
We have seen plugins that separate web forms into different pages, now you have an even better option and that’s installing a fancy sliding web form with jQuery.
Author: http://tympanus.net/codrops/author/crnacura/
Home Page: http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
Demo: http://tympanus.net/Tutorials/FancySlidingForm/
This one is definitely a helpful implementation as we’re currently seeing how the different world languages are being smashed by things like Messenger and live chats.
Author: http://plugins.jquery.com/user/25312
Home Page: http://plugins.jquery.com/project/AtD
Demo: http://www.polishmywriting.com/atd-jquery/demo3.html
Twitter recently launched this function on their site and now you will learn how to use it with jQuery, the function is an automated auto suggest function that works perfectly.
Author: http://code.drewwilson.com/
Home Page: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Demo: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Adds an additional interactivity to form lists utilizing this jQuery plugin.
Author: http://www.ryancramer.com/
Home Page: http://code.google.com/p/jquery-asmselect/
Demo: http://www.ryancramer.com/projects/asmselect/examples/example1.html
Another auto suggest plugin, this one got its inspiration for the classic Facebook’s search bar.
Author: http://www.web2ajax.fr/
Home Page: http://www.web2ajax.fr/2008/02/03/facebook-like-jquery-and-autosuggest-search-engine/
Demo: http://www.web2ajax.fr/examples/facebook_searchengine/
Use this jQuery plugin if you want to change the skin of one or all the elements of an specific web form.
Author: http://code.google.com/u/@UhFRRVRRAhNFWQV%2F/
Home Page: http://code.google.com/p/jquery-formdesigner-plugin/
Demo: http://opensource.steffenhollstein.de/templates/formdesigner/
Just another web form design with all the basic functions and a warning system that informs when something has not been filled before submitting.
Author: http://sanjay45.gofreeserve.com/
Home Page: http://sanjay45.gofreeserve.com/jqueryDemo.html
Demo: http://sanjay45.gofreeserve.com/jqueryDemo.html
Useful auto complete plugin to insert in your web forms, this is specially helpful for web pages where you have to enter similar information in the same form.
Author: http://bassistance.de/
Home Page: http://designresourcebox.com/snippet/autocomplete-jquery-plugin/
Demo: http://jquery.bassistance.de/autocomplete/demo/
Although this may seem something elementary, not all the web forms are designed to support progress bars like the one on this form.
Author: http://designresourcebox.com/
Home Page: http://designresourcebox.com/snippet/progress-bar-with-javascript/
Demo: http://d2o0t5hpnwv4c1.cloudfront.net/266_progressSlider/jQuery%20UI/regForm.html
One more auto complete plugin powered with jQuery that can be quite helpful for any web developer.
Author: http://www.codenothing.com/
Home Page: http://www.codenothing.com/archives/jquery/auto-complete/
Demo: http://www.codenothing.com/demos/2009/auto-complete/demo/
Instead of displaying word hints into the text forms, this plugin shows the hint inside a separated box next to the text form in question.
Author: http://gamma.mini.pw.edu.pl/
Home Page: http://gamma.mini.pw.edu.pl/~mikolajewskip/jq_advisor/
Demo: http://gamma.mini.pw.edu.pl/~mikolajewskip/jq_advisor/
On this link you will find an useful way of add an auto complete feature to your Google Search Engine hand in hand with jQuery.
Author: http://net.tutsplus.com/author/peterbekisz/
Home Page: http://net.tutsplus.com/tutorials/javascript-ajax/adding-a-jquery-auto-complete-to-your-google-custom-search-engine/
Demo: http://net.tutsplus.com/demos/15_searchTut/search.html
You can utilize this jQuery plugin to fill forms from the JSON library.
Author: http://makoto.blog.br
Homepage: http://makoto.blog.br/formFill/
Demo: http://makoto.blog.br/formFill/
Well, what if you want to add a birthday reminder or just a birth date inside your forms?, the best choice will probably be incorporating this jQuery plugin.
Author: http://plugins.jquery.com/users/abecoffman
Home Page: http://plugins.jquery.com/project/birthdaypicker
Demo: http://abecoffman.com/birthdaypicker/
With this plugin you will no longer depend entirely of the Tab key for switching between text fields because now Enter and Space will also able to perform that function.
Author: http://plugins.jquery.com/users/behnam
Home Page: http://plugins.jquery.com/project/bsformaccelerator
Demo: http://plugins.jquery.com/project/bsformaccelerator
Appearance and hints
The other aspect that must be considered when improving a web form is aesthetic. Normally forms have a similar design, featuring white boxes, system fonts and everything tending to black and white, now that jQuery can make things look better, we can actually find many useful plugins and tutorials that gives people a hand to make prettier forms without sacrificing any performance or accessibility, you will also find on this section several plugins that can improve the accessibility in some really useful ways by beautifying your forms and adding some truly helpful hints.
Instead of placing an ordinary web form at the bottom of your website, why not implementing a prettier design that pops out from one side of the page?.
Author: http://theodin.co.uk/
Home Page: http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html
Demo: http://plugins.theodin.co.uk/jquery/contactable/index.html
With this jQuery plugin you will be able to highlight the different form elements to facilitate the accessibility through your keyboard.
Author: http://67bricks.com/blog/
Home Page: http://67bricks.com/blog/labelfocus-a-jquery-plugin-to-increase-accessibility-of-form-elements-for-keyboard-users/
Demo: http://67bricks.com/jquery.labelFocus/test/focusLabelling.html
Beautiful animated form brought to you by the Codrops team, this is an example of how to keep things simple, beautiful and functional.
Author: http://tympanus.net/codrops/author/crnacura/
Home Page: http://tympanus.net/codrops/2011/01/06/animated-form-switching/
Demo: http://tympanus.net/Tutorials/AnimatedFormSwitching/
This guide will guide you on the process of creating a beautiful jQuery powered web form.
Author: http://www.twitter.com/jonbergan
Home Page: http://designluv.com/input-output/tutorials/a-beginners-guide-to-a-beautiful-jquery-form-part-1-of-2/
Demo: http://designluv.com/wp-content/resources/demos/beautiful-jquery-form-part-1-of-2/
Prettifying your forms might be as simple as adding fading hints that disappear gradually instead of banish after a click action.
Author: http://www.narga.net/
Home Page: http://www.narga.net/making-awesome-forms-inline-labels-with-jquery/
Demo: http://www.narga.net/making-awesome-forms-inline-labels-with-jquery/
The Digg sign up form is an example of simple and effective design, now your going to learn how to do that exactly same web form.
Author: http://designshack.co.uk/author/jankojovanovic/
Home Page: http://designshack.co.uk/articles/creating-a-digg-style-sign-up-form
Demo: http://www.designshack.co.uk/tutorialexamples/diggform/
Lovely web form design powered with jQuery and the raising CSS3, this will probably be a major hit on this year.
Author: http://tympanus.net/codrops/author/community/
Home Page: http://tympanus.net/codrops/2011/01/11/collective-multi-step-signup-form-with-css3-and-jquery/
Demo: http://webexpedition18.com/download/signup_form_WebExpedition18/
One more article featuring these popular selection buttons and the way of implementing them on your different projects.
Author: http://devsnippets.com/article/creating-slick-forms-using-ajax-jquery.html
Home Page: http://devsnippets.com/article/creating-slick-forms-using-ajax-jquery.html
Demo: http://devsnippets.com/
For sites like Flickr, this plugin could be truly helpful as it displays a preview of the picture in question.
Author: http://rikrikrik.com/
Home Page: http://rikrikrik.com/jquery/magicpreview/
Demo: http://rikrikrik.com/jquery/magicpreview/#examples
Inspired on the Apple website, you will see a fancy search suggestion box when typing a search parameter.
Author: http://www.marcofolio.net/
Home Page: http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html
Demo: http://qpoit.com/marcofolio_demo/apple_search/
A lovely way of incorporate pixel buttons to your contact forms that will give them a much nicer appearance.
Author: http://www.jankoatwarpspeed.com/
Home Page: http://www.jankoatwarpspeed.com/post/2008/11/26/Make-image-buttons-a-part-of-input-fields.aspx
Demo: http://www.jankoatwarpspeed.com/examples/input_fields_with_images/
Give your forms a nicer appearance without changing the original design drastically.
Author: http://www.dfc-e.com/
Home Page: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
Demo: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
Insert custom images and formatted text into your web forms with ease.
Author: http://www.senamion.com/
Home Page: http://www.senamion.com/blog/2009/08/08/jlistbox-jquery-plugin-for-formatted-select-box/
Demo: http://www.senamion.com/blog/jlistbox_demo.html
jQuery can definitely aid you to create beautiful form fields without having to lose your mind.
Author: http://line25.com/
Home Page: http://line25.com/tutorials/how-to-enhance-your-form-input-fields-with-jquery
Demo: http://line25.com/wp-content/uploads/2010/input-jquery/demo/index.html
If you want to secure your web forms so nobody steals them from you, then this plugin can help you as it inserts a subtle watermark on top of them.
Author: http://plugins.jquery.com/users/skobyjay
Home Page: http://plugins.jquery.com/project/WaterMarker
Demo: No demo available currently.
Another jQuery plugin that will help you beautify your lame web forms.
Author: http://www.patriktotero.com/
Home Page: http://plugins.jquery.com/project/FormSelectRestyled
Demo: No demo available currently.
Custom check box elements to insert in your forms thanks to the magic of jQuery.
Author: http://www.protofunc.com/
Home Page: http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Demo: http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Fancy login form developed by the NetTuts+ team, the animation displays a nice spring effect when hiding and showing again.
Author: http://net.tutsplus.com/author/connorzwick/
Home Page: http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
Demo: http://d2o0t5hpnwv4c1.cloudfront.net/041_TopPanelWithJquery/demo/index.html
Another proposal of a different login form to be implemented in your different web design projects.
Author: http://fearlessflyer.com/
Home Page: http://fearlessflyer.com/2009/06/how-to-create-a-slick-jquery-login-form-for-wordpress/
Demo: http://blue.fearlessflyer.com/home/jquery-demo/#
Many web forms that feature word hints have them configured in a way that as soon as you click they disappear, this one instead of that only reduces the opacity when you click and disappears the hint only when you start entering text.
Author: http://designresourcebox.com/
Home Page: http://designresourcebox.com/snippet/in-field-labels-jquery-plugin/
Demo: http://fuelyourcoding.com/scripts/infield/
A lovely way of customizing the different elements of a web form by adding a texture to the text area, a color overlay to the name field, etc.
Author: http://ajaxcssblog.com/jquery/
Home Page: http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/
Demo: http://sandbox.ajaxcssblog.com/jquery/jquery.fieldtag/fieldtag-demo.htm
Change your forms’ appearance by modifying their color while inserting text inside of them.
Author: http://www.vivalasam.com/
Home Page: http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
Demo: http://buildinternet.com/live/jqueryform/jqueryform1.php
Another way of working with checklist, this one displays filled circles instead of
Author: http://mypocket-technologies.com/
Home Page: http://mypocket-technologies.com/jquery/SelectBoxPlugin/
Demo: http://mypocket-technologies.com/jquery/SelectBoxPlugin/
And here’s another series of examples showing how to make prettier and clean web forms.
Author: http://arielext.selfip.org/FancyForm/index.html (The People’s Valley)
Home Page: http://arielext.selfip.org/FancyForm/index.html
Demo: http://arielext.selfip.org/FancyForm/form2.html
http://arielext.selfip.org/FancyForm/form3.html
http://arielext.selfip.org/FancyForm/form4.html
http://arielext.selfip.org/FancyForm/form5.html
Instead of worrying about the forms, what about if you change the typeface’s appearance?.
Author: http://blog.mudaimemo.com/
Home Page: http://code.google.com/p/jquery-formnotifier/
Demo: http://www.mudaimemo.com/p/formnotifier/
Change the looks and measures of your web forms thanks to this nice jQuery plugin.
Author: http://designresourcebox.com/
Home Page: http://designresourcebox.com/snippet/jqtransform-jquery-plugin/
Demo: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
Every time you select an object, this plugin will highlight it by displaying a subtle texture behind it.
Author: http://designresourcebox.com/
Home Page: http://designresourcebox.com/snippet/jquery-highlight-plugin/
Demo: http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html
This demo will show you an example of subtle in-field labels that can be implemented to your forms.
Author: http://fuelyourcoding.com/author/dougnein/
Home Page: http://fuelyourcoding.com/in-field-labels/
Demo: http://fuelyourcoding.com/scripts/infield/
Useful hints to install next to your jQuery-powered web forms.
Author: http://blog.robvolk.com/
Home Page: http://jqueryhints.codeplex.com/
Demo: http://blog.robvolk.com/2009/01/jquery-form-input-hints.html
Nice design touch applied to web forms, this plugin highlights the selected field by adding an elegant texture behind it.
Author: http://www.keyframesandcode.com/
Home Page: http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/
Demo: http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html
Another plugin that inserts custom form tips to your jQuery forms.
Author: http://manuelboy.de/
Home Page: http://manuelboy.de/projekte/jquery-formtips/
Demo: http://manuelboy.de/projekte/jquery-formtips/
Browser compatibility and code improvement
This section covers all the tutorials and plugins that provide different methods to improve jQuery at his primary level, the code. You will find different ways of generate fancy forms that fit better inside the new web standards, which includes HTML5, CSS3 and more; regarding the code, these tutorials and plugins will let you make a better appropriation of jQuery so you spend less hours working with code.
A helpful list of complements to insert in your web form designs, you can see some of them in the screenshot.
Author: http://plugins.jquery.com/users/andreyk
Home Page: http://plugins.jquery.com/project/a-tools
Demo: http://www.ampparit.com/projects/a-tools/demo.html
Ajax and jQuery are simply best friends, and one good example is this fancy form design.
Author: http://tutorialzine.com/ (Martin Angelov)
Home Page: http://tutorialzine.com/2009/09/fancy-contact-form/
Demo: http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php
A simple contact form powered with PHP and jQuery.
Author: http://www.snilesh.com/author/snilesh/
Home Page: http://www.snilesh.com/resources/jquery/jquery-php-feedback-form/
Demo: http://www.snilesh.com/demo/jquery_feedback/
Another contact form powered with jQuery and PHP to receive information from your clients and visitors.
Author: http://www.tutorialstag.com/
Home Page: http://www.tutorialstag.com/advanced-jquery-contact-form-with-php-support.html
Demo: http://www.tutorialstag.com/examples/contact.php
As we said, using AJAX and jQuery often delivers great results, like it happens on this form example.
Author: http://jvance.com/blog/
Home Page: http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml
Demo: http://jvance.com/blog/2010/02/20/MakingAnAjaxFormWithJQueryInASPdotNETMVC.xhtml
If AJAX and jQuery work well, adding PHP to the formula is just brilliant.
Author: http://www.beautilitydesign.co.uk/
Home Page: http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/
Demo: http://www.tuttoaster.com/wp-content/uploads/demos/8/contact_form/
Helpful resource to turn your standard forms into wizard elements which are easier to fill and implement.
Author: http://www.jankoatwarpspeed.com/
Home Page: http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
Demo: http://www.jankoatwarpspeed.com/examples/webform_to_wizard/#
Fancy form design from the Tutorialzine team, you can find all the documentation to learn how to make this great component.
Author: http://tutorialzine.com/ (Martin Angelov)
Home Page: http://tutorialzine.com/2010/04/carbon-signup-form/
Demo: http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html
The most important thing about any web form is to guarantee that all the content reaches its target, and this article will help you with that.
Author: http://tympanus.net/codrops/author/chadking/
Home Page: http://tympanus.net/codrops/2010/03/12/php-mysql-contact-form-with-jquery/
Demo: http://tympanus.net/Tutorials/ContactForm/index1.php
Another jQuery plugin that establishes tips inside the different form fields to aid people fill all the text areas required.
Author: http://blog.manuelboy.de/
Home Page: http://code.google.com/p/jquery-formtips/
Demo: http://manuelboy.de/projekte/jquery-formtips/#demo
Another tutorial where you can learn how to make a fancy wizard form using jQuery.
Author: http://www.w3avenue.com/author/admin/
Home Page: http://www.w3avenue.com/2010/06/22/jwizard-jquery-form-wizard-plugin/
Demo: No demo available currently.
Useful tutorial that teaches you the way of making functional web forms with the help of jQuery.
Author: http://papermashup.com/
Home Page: http://papermashup.com/jquery-form-titles/
Demo: http://papermashup.com/demos/jquery-form-titles/
StickyForms is a jQuery plugin that automatically saves all form fields as cookies, and then auto fills those values on any form that shares element ID’s across your site.
Author: http://www.jqbyte.com/
Home Page: http://www.jqbyte.com/StickyForms/
Demo: http://www.jqbyte.com/StickyForms/documentation.php
A big list of useful jQuery extensions and resources to work with web forms.
Author: https://bitbucket.org/
Home Page: https://bitbucket.org/mrshrinkray/jquery-extensions/wiki/Home
Demo: No demo available currently.
The great thing about this WordPress form is that you can use jQuery to enhance it without having to use any plugins.
Author: http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/
Home Page: http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/
Demo: http://wp.tdavis.webfactional.com/contact-form/
Great contact form that does not refresh after you click the Send button.
Author: http://net.tutsplus.com/author/ericrenkai/
Home Page: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Demo: http://net.tutsplus.com/demos/contactform/
Thanks to jQuery UI you can give your forms a nice appearance like the one displayed on this picture.
Author: http://www.tuttoaster.com/
Home Page: http://www.tuttoaster.com/enhancing-forms-using-jquery-ui/
Demo: http://www.tuttoaster.com/wp-content/uploads/demos/5/index.html
A nice way of placing a quick feedback form in your website using PHP and jQuery.
Author: http://www.webappers.com/
Home Page: http://www.webappers.com/2010/11/29/quick-feedback-form-powered-by-php-jquery/
Demo: http://demo.tutorialzine.com/2010/09/quick-feedback-form-php-jquery/feedback.html
We suggest you to review the documentation of this link as it implements some of the Web Forms 2.0 that will be available with HTML5.
Author: http://code.google.com/u/@VxReQ11YDhNFXQd4/
Home Page: http://code.google.com/p/jquery-webforms-2/
Demo: No demo available currently.
Cute and simple jQuery form plugin that can be implemented in any website with ease.
Author: http://www.malsup.com/jquery/form/
Home Page: http://www.malsup.com/
Demo: http://www.malsup.com/jquery/form/#tab4
Basically what this plugin does is to clear the value of a form field when in focus and remembers the default value.
Author: http://plugins.jquery.com/user/38866
Home Page: http://plugins.jquery.com/project/clear-value
Demo: No demo available currently.
Another jQuery plugin that clears any field when a specifical action takes place.
Author: http://plugins.jquery.com/user/25227
Home Page: http://plugins.jquery.com/project/clearfieldvalue
Demo: No demo available currently.
this is a simple code by which you can get and set the form fields get form fields $(“form”).validateForm();.
Author: http://plugins.jquery.com/user/43126
Home Page: http://plugins.jquery.com/project/getsetformfields
Demo: No demo available currently.
This tutorial shows you how to implement a jQuery-Ajax contact form in a WordPress page.
Author: http://www.wp-themix.org/
Home Page: http://www.wp-themix.org/wordpress/how-to-add-a-jquery-ajax-contact-form-to-wordpress/
Demo: http://dev.wp-themix.org/?page_id=235
One more tutorial where you can see a good way of making web forms with JSON and jQuery.
Author: http://neyeon.com/
Home Page: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
Demo: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
Insert a fancy progress bar to your jQuery-powered web forms.
Author: http://tympanus.net/codrops/
Home Page: http://tympanus.net/codrops/2010/05/20/collective-create-jquery-form-with-progress-bar-and-input-limiter/
Demo: http://demos.99points.info/jquery_form_progress/
On this article you will see a nice way of insert dropdown forms into your websites.
Author: http://www.marghoobsuleman.com/
Home Page: http://www.marghoobsuleman.com/jquery-image-dropdown
Demo: http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html
Another clear form plugin made for jQuery, it clears any text field with ease, helping you restore your forms to default.
Author: http://truthanduntruth.com/development/
Home Page: http://truthanduntruth.com/development/jquery/plugins/clearform/
Demo: http://truthanduntruth.com/development/jquery/plugins/clearform/#headerlinks_ident10
Elegant form designs inserted via jQuery, you can give a nicer appearance to your forms without losing any functionality.
Author: http://codebrewery.blogspot.com/p/about-me.html
Home Page: http://codebrewery.blogspot.com/2011/01/formidable-custom-forms-with-jquery-and.html
Demo: http://www.codebrewery.ch/Formidable/sample.html
jQuery AlphaNumeric is a JavaScript control plugin that allows you to limit what characters a user can enter on textboxes or text areas.
Author: http://www.webplicity.net/
Home Page: http://itgroup.com.ph/alphanumeric/
Demo: http://itgroup.com.ph/alphanumeric/
Truly helpful jQuery plugin designed specifically to help you remove spam of every kind from your site.
Author: http://jasonlau.biz/home/
Home Page: http://jasonlau.biz/home/a-better-form-a-jquery-plugin
Demo: http://jasonlau.biz/home/a-better-form-a-jquery-plugin
Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms by displaying an alert to the person.
Author: http://mal.co.nz/about/
Home Page: http://mal.co.nz/code/jquery-dirty-forms/
Demo: http://mal.co.nz/code/jquery-dirty-forms/
And here we have another Ajax form powered with the magic of jQuery.
Author: http://trevordavis.net/
Home Page: http://trevordavis.net/blog/ajax-forms-with-jquery/
Demo: http://trevordavis.net/blog/ajax-forms-with-jquery/
jCryption is a JavaScript HTML-form encryption plugin that encrypts the POST/GET data submitted by web forms.
Author: http://www.dreamcss.com/
Home Page: http://www.dreamcss.com/2009/08/javascript-html-form-encryption-plugin.html
Demo: No demo available currently.
Validation
Many times when people fill forms and think that they have input all the right values they actually made a few mistakes and that’s when validations join the game and help to double check if the person inserted all the right information in order to continue with the process. Form validations inform people about the missing data on the form that needs to be typed before proceeding; we can consider different validation types, including server-side validation and client-side validation. Before we saturate you with more information, let’s just say that thanks to jQuery now you can make much better validation systems, as the ones quoted on the following examples.
Ketchup is a lightweight (3.4KB minified & zipped) jQuery plugin that helps you validate your forms.
Author: http://usejquery.com/
Home Page: http://demos.usejquery.com/ketchup-plugin/index.html
Demo: http://demos.usejquery.com/ketchup-plugin/index.html
Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML.
Author: http://mattnull.com/
Home Page: http://mattnull.com/formation
Demo: http://mattnull.com/formation
jFormat is a reusable jQuery plugin aimed at making format checks easy.
Author: http://geechu.com/
Home Page: http://geechu.com/jformat/
Demo: http://geechu.com/jformat/
ValidText uses a concept of “rules” and “actions”, separating it from the common jQuery validators.
Author: http://joncom.be/
Home Page: http://joncom.be/code/jquery-validtext/
Demo: http://joncom.be/contact/
Helpful jQuery validator to implement within your HTML5 forms.
Author: http://www.matiasmancini.com.ar/
Home Page: http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html
Demo: http://www.matiasmancini.com.ar/ajax-jquery-validation-html5-form.html
This plugin allows you to disabled a form element if a specified condition is not fulfilled and enables it as soon as it is.
Author: http://plugins.jquery.com/users/eterneige
Home Page: http://plugins.jquery.com/project/form-dependancies
Demo: No demo available currently.
Simple and highly functional jQuery form validator, ideal for any type of website.
Author: http://sites.google.com/site/jformval/
Home Page: http://sites.google.com/site/jformval/
Demo: No demo available currently.
On this tutorial you will learn how to insert a validation to your forms in WordPress thanks to the power of jQuery.
Author: http://net.tutsplus.com/author/philo/
Home Page: http://net.tutsplus.com/tutorials/wordpress/adding-form-validation-to-wordpress-comments-using-jquery/
Demo: http://d2o0t5hpnwv4c1.cloudfront.net/021_Form/demo.html
A lightweight alternative to the AJAX Toolkit Validator Callout extender based on jQuery.
Author: http://www.codeplex.com/site/users/view/mcm_ham
Home Page: http://validator.codeplex.com/
Demo: http://validator.codeplex.com/
jQuery.validVal is a plugin designed to simplify form validation, with dozens of great features and highly customization.
Author: http://www.frebsite.nl/home/
Home Page: http://validval.frebsite.nl/
Demo: http://validval.frebsite.nl/examples.php
This jQuery plugin helps people create easy form validations with high flexibility and a large set of options.
Author: http://www.geektantra.com/
Home Page: http://www.geektantra.com/2009/09/jquery-live-form-validation/
Demo: http://www.geektantra.com/projects/jquery-form-validate/advanced_demo/
To make this jQuery plugin work, just mark the required fields and assign them validation rules to check before submitting the form.
Author: http://www.icograma.com/
Home Page: http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-validation-and-hints-client-side-form-validation.html
Demo: http://www.icograma.com/open-source-demos/jquery-form-validation-and-hints-demo.html
This plugin displays a confirmation dialog once you enter a value and hit submit.
Author: http://www.jensbits.com/
Home Page: http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/
Demo: http://www.jensbits.com/demos/forms/index.php
Fancy Ajax drop down menu that validates with the power of jQuery.
Author: http://www.jqeasy.com/
Home Page: http://www.jqeasy.com/jquery-drop-down-ajax-sign-in-form/
Demo: http://www.jqeasy.com/jquery-drop-down-ajax-sign-in-form/demo/
This jQuery form field validation plugin that displays an animated message that does not affect the form’s layout.
Author: http://www.overset.com/
Home Page: http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin/
Demo: http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin/
This handy jQuery plugin is easy to install and simply give your inputs the ‘required’ class, then calls the validateMyForm plugin and your form is magically client-side validated!
Author: http://www.salesplusplus.com/
Home Page: http://www.salesplusplus.com/validatemyform-jquery-plugin-easy-form-validation/
Demo: http://www.salesplusplus.com/jquery-plugins/validateMyForm/demo.html
Bored of the old school Captcha designs?, then try out this fancy Ajax/jQuery Captcha validator where you have to drag an element to prove that you’re human.
Author: http://www.webdesignbeach.com/
Home Page: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin
Demo: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin
On this tutorial you will learn how to make a highly customizable jQuery plugin with ease.
Author: http://www.webdeveloperjuice.com/author/admin/
Home Page: http://www.webdeveloperjuice.com/2010/03/22/highly-customizable-yet-simple-form-validation-jquery-plugin/
Demo: http://www.webdeveloperjuice.com/demos/jquery/validate.html
If you want to make your first jQuery form validator, then this tutorial will definitely help you out.
Author: http://www.oreillynet.com/pub/au/4375
Home Page: http://insideria.com/2010/10/form-validation-with-jquery.html
Demo: No demo available currently.
jQuery.validity is an elegant and powerful jQuery plugin that you can use to setup a client-side form validation.
Author: http://validity.thatscaptaintoyou.com/
Home Page: http://validity.thatscaptaintoyou.com/
Demo: http://validity.thatscaptaintoyou.com/
And on this tutorial you will learn how to build a real-time form validation with jQuery.
Author: http://www.1stwebdesigner.com/author/michalkozak
Home Page: http://www.1stwebdesigner.com/tutorials/building-real-time-form-validation-using-jquery/
Demo: http://dl.dropbox.com/u/1715120/demos/real-time-form-validation-using-jquery/index.html
This may seem obvious but probably many people don’t know how to do this, a functional username-check validation using Ajax and jQuery.
Author: http://web.enavu.com/
Home Page: http://web.enavu.com/tutorials/checking-username-availability-with-ajax-using-jquery/
Demo: http://web.enavu.com/tutorials/checking-username-availability-with-ajax-using-jquery/
Helpful tutorial that introduces to the world of making jQuery validations for web forms.
Author: http://www.skill-guru.com/blog/author/fanand/
Home Page: http://www.skill-guru.com/blog/2010/04/18/jquery-validation-tutorial/
Demo: http://www.position-relative.net/creation/formValidator/
On this page you will find all the relevant information about jQuery’s auto validation system.
Author: http://phrogz.net/
Home Page: http://phrogz.net/JS/FormAutoValidate/formautovalidate_docs.html
Demo: http://phrogz.net/JS/FormAutoValidate/formautovalidate_docs.html
On this tutorial our friend Addy Osmani teaches us the best way of adding form validation to your websites utilizing jQuery.
Author: http://addyosmani.com/
Home Page: http://addyosmani.com/blog/how-to-add-form-validation-using-jquery-in-2-easy-steps/
Demo: http://www.addyosmani.com/resources/jqueryvalidate/
Related Articles
For more useful resources about jQuery forms, best practices and better ways of implement them within your web projects, we want to suggest you the following articles:
Now we have reached the end of this review, tons of tutorials and plugins that can help you make a better work with web forms, both in practical and design aspects. Leave us a comment with your opinions and suggestions on how to improve the quality of our articles, we will really appreciate it and well, we hope this article becomes a good reference for all of you, thanks for visiting us and we’ll see you in our next article.
