English: The text "jQuery" in the of...

Image via Wikipedia

Screenshot of jQuery source code

Image via Wikipedia

English: OpenCLinica: styling with jQuery

Image via Wikipedia

English: OpenClinica: styling with jQuery

Image via Wikipedia

English: OpenClinica: styling with jQuery

Image via Wikipedia

English: OpenClinica: Styling with jQuery

Image via Wikipedia


Image via Wikipedia

English: This was a Logo for JQuery Terminal E...

Image via Wikipedia

English: "jQuery is Your Friend" by ...

Image via Wikipedia

Pidgin plugin window with encryption enabled

Image via Wikipedia

English: OpenClinica: styling with jQuery

Image via Wikipedia

English: OpenClinica: styles with jQuery

Image via Wikipedia

English: OpenCLinica: styling with jQuery

Image via Wikipedia

JQuery old site

JQuery old site (Photo credit: Phillie Casablanca)

Happy Birthday, TinyOgg


Image via Wikipedia

Foundry RX-16 with six racks of MRJ21 cables

Foundry RX-16 with six racks of MRJ21 cables (Photo credit: vaxomatic)

JQuery intermediate site

JQuery intermediate site (Photo credit: Phillie Casablanca)

KPT Spheroid Designer 3.0

Image via Wikipedia


Image via Wikipedia

English: Asychronous JavaScript And XML is AJAX

Image via Wikipedia

Screenshot from default mozilla plugin list.

Image via Wikipedia

JQuery new site

JQuery new site (Photo credit: Phillie Casablanca)

English: jQuery Mobile logo.

Image via Wikipedia

jQuery 1.2 - 1.4 Distribution - Alexa Top 100

jQuery 1.2 - 1.4 Distribution - Alexa Top 100 (Photo credit: jwalsh)

jQuery 1.2 - 1.4 Distribution

jQuery 1.2 - 1.4 Distribution (Photo credit: jwalsh)

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 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.

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.


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?.


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).


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.

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 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/



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/

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

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

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



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

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/

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/

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



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



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/



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/

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/



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/

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

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.



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

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

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/

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/



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/



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

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.



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/



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




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/



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

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



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 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


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.

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 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/



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/

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



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/

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.


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/

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/

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

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/



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/

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

Modal Confirmation Dialog


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

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/



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

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/

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

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.



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/

  1. My Homepage says:

    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

  2. invest liberty reserve says:

    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

  3. Emerson Scerra says:

    I regard something really interesting about your web blog so I bookmarked .

  4. hybrid car reviews says:

    You have brought up a very fantastic points , appreciate it for the post.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s