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 – Added April 29 / 2011
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)
jQuery Form Wizard – Added April 29 / 2011
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 – Added April 29 / 2011
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
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.
FormBox
With this helpful plugin, you will be able to place the ‘login’, ‘sign-up’ and ‘retrieve password’ windows in a single webpage.
A jQuery Inline Form Validation
An unobtrusive jQuery validation system that displays a very organized validation system in search of cleaning all the mess.
Vintage typewriter: The sexiest jQuery contact form ever
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.
Form Highlighter
A simple jQuery Plugin, used to scan through your website and automatically attach focus,blur and keydown effect on your form fields.
JQF1
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.
Sexy Forms
Why always using the same boring form designs if you can change them a little bit and make them look a thousand times better?.
DigitalBush
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.
dForm 0.1.2
The jQuery.dForm plugin allows you to create your HTML forms with ease from JavaScript objects (and therefore JSON, too).
SheepIt!
Fancy web form to insert in your site, the design remains simple and attractive while remaining a good structure and diagramming.
FormLabels
With FormLabels you can easily Insert subtle form hints whilst displaying a different and attractive form design.
ToCheck list
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
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.
Form Hints 1.0
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
Multi-page Form
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#
jQuery Form Selectors Example
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
Web SpinButton
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/
Form Changed Warning
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
Twitter Suggestion
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/
Unwrongest
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
Clearfield
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/
Dropdown Box Likes Twitter
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/#
Selecting Multiple Select Form Elements
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
Using form labels as text field values
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/
Comment Preview
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
Autosave
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
NobleCount
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
Show Password
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/
Demo: http://www.prothemer.com/labs/jquery/showpassword/
Checkbox
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/
Fancy Sliding Form
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/
After The Deadline
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
AutoSuggest
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
Asm Select
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
Autosuggest
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/
Form Designer
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/
Demo
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
Autocomplete
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/
Progress Bar
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
Auto Complete
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/
Advisor
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/
How to Add Auto Complete to Your Google Search Engine
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/
Demo: http://net.tutsplus.com/demos/15_searchTut/search.html
Form Fill
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/
Birthday Picker
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/
BS Form Accelerator
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.
Contactable
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
labelFocus
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/
Demo: http://67bricks.com/jquery.labelFocus/test/focusLabelling.html
Animated Form Switching with jQuery
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/
Beautiful jQuery Form
This guide will guide you on the process of creating a beautiful jQuery powered web form.
Author: http://www.twitter.com/jonbergan
Demo: http://designluv.com/wp-content/resources/demos/beautiful-jquery-form-part-1-of-2/
Making Awesome Form’s Inline Labels
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/
Digg Style Sign Up Form
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/
Collective
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/
Creating Slick Forms
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/
Magic Preview
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
A fancy Apple.com-style search suggestion
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/
Make Image Buttons a Part of Input Fields
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/
jQTransform
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/
jListbox
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
Enhance Your Form Input Fields with jQuery
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
Form Textbox Watermarker
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.
Form Selected Restyled
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.
Radiobutton
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/
Incredible Login Form
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
Slick jQuery Login Form for WordPress
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/#
In-Field Labels
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/
Fieldtag
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
Changing Form Input Styles
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
Custom Select Box
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/
Fancy Form
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
Form Notifier
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/
jqTransform
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/
Highlight
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
In-Field Labels
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/
Form Input Hints
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
Highlight
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
Form Tips
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-Tools
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
A Fancy Ajax Contact Form
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
jQuery PHP Feedback Form
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/
jQuery Contact Form with PHP Support
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
Ajax Form with jQuery
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
Create an AJAX/jQuery/PHP Contact Form
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/
Turn Any Webform Into a Powerful Wizard
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/#
Carbon Fiber Signup Form
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
PHP/MySQL Contact Form with jQuery
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
FormTips
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
jWizard
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.
jQuery Form Titles
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
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
jQuery Extensions
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.
WordPress & jQuery Contact Form
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/
Submit a Form Without Page Refreshing
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/
How to Enhance Forms Using jQuery UI
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
Quick Feedback Form Powered by PHP & jQuery
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
Web Forms 2.0
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.
Form Plugin
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
Clear The Value of a Form Field
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.
Clear Form Field Value
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.
Get and Set Form Fields
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.
How to add a jQuery/Ajax contact form to WordPress
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
Creating forms in JSON with jQuery
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/
Collective
Insert a fancy progress bar to your jQuery-powered web forms.
Author: http://tympanus.net/codrops/
Demo: http://demos.99points.info/jquery_form_progress/
JavaScript Image Combobox
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
Clearform
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
Formidable
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
AlphaNumeric
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/
A Better Form
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
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/
Ajax Forms with jQuery
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/
Form Encryption
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
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
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
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
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/
jQuery.HTML5 Form
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
Form Dependancies
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.
jForm Val
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.
Form Validation to WordPress Comments
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/
Demo: http://d2o0t5hpnwv4c1.cloudfront.net/021_Form/demo.html
Form Validators
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/
ValidVal
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
Live Form Validation
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/
Form Validation
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/
Demo: http://www.icograma.com/open-source-demos/jquery-form-validation-and-hints-demo.html
Modal Confirmation Dialog
This plugin displays a confirmation dialog once you enter a value and hit submit.
Author: http://www.jensbits.com/
Demo: http://www.jensbits.com/demos/forms/index.php
Drop Down Ajax Sign In Form
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/
jVal
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/
ValidateMyForm
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
Ajax Fancy Captcha
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
Highly Customizable Form Validation
On this tutorial you will learn how to make a highly customizable jQuery plugin with ease.
Author: http://www.webdeveloperjuice.com/author/admin/
Demo: http://www.webdeveloperjuice.com/demos/jquery/validate.html
Form Validation with jQuery
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.
Validity
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/
Building Real-Time Form Validation
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
Checking Username Availability with Ajax using jQuery
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/
JQuery Validation Tutorial
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/
jQuery AutoValidation
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
How To Add Form Validation
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
- Set YouTube Video as Background with Tubular jQuery Plugin (xkortazar.wordpress.com)
- Jquery Samples from net (rajbgm.wordpress.com)
- 30 Cool jQuery Tooltip Plugins for Interactive Designs (tripwiremagazine.com)
- 35 Highly Advanced Yet Simple To Use jQuery Plugins (smashingapps.com)
- Creating Reusable jQuery Templates in Visual Studio (devx.com)
- [Book] O’Reilly – jQuery Mobile (studylinux.wordpress.com)
- Introduction to jQuery selectors (itswadesh.wordpress.com)
- 40+ Useful and Fresh jQuery Plugins (noupe.com)
- 25 jQuery Plugins to help with Responsive Layouts (speckyboy.com)
- Adding additional functions within a jQuery plugin (stackoverflow.com)
Zeeshan Akhter 
You completed certain very good points there. I did looking on the topic matter and identified most persons will go together along with your weblog 380029
LikeLike
jQuery form, 100 Best plugins, tools & tutorials Zeeshan Akhter I was recommended this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re wonderful! Thanks! your article about jQuery form, 100 Best plugins, tools & tutorials Zeeshan AkhterBest Regards Shane
LikeLike
thanks dear ……..can u tell me who is ur cousin …and how he can tell u abt my blog and dear on blog its only me and u can see also author of each post…..
LikeLike
I regard something really interesting about your web blog so I bookmarked .
LikeLike
You have brought up a very fantastic points , appreciate it for the post.
LikeLike