Home arrow JavaScript arrow 10 jQuery Plugins for Forms

10 jQuery Plugins for Forms

There are a plethora of jQuery plugins when it comes to forms. You could spend much of your precious time trying to decipher which are worth your while, or you could read this top ten list that simplifies the selection process for you. Here are ten of the top jQuery plugins that deal with the various aspects of forms.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
April 18, 2011
  1. · 10 jQuery Plugins for Forms
  2. · Five More Great jQuery Form Plugins

print this article

10 jQuery Plugins for Forms
(Page 1 of 2 )


The jqTransform plugin was created to allow you to skin form elements to get an updated look for forms on your website.  Default forms often have a plain look that will appear according to how your browser wants it to.  Using jqTransform let's you take the same default form and skin it with the options of your choice.  You can improve the look of your radio buttons, affect how the input fields change color when you hover over or click in them, change any check boxes, drop-down menus, and more.  The plugin gives you the option to customize your form by editing the CSS file and is easy to use.

Link: http://plugins.jquery.com/project/jqtransform

jQuery Form Notifier

Form Notifier is a very small and simple plugin that offers sizable impact to your forms.  The plugin helps convert the input fields on your forms so that they display text, which is also known as a watermark.  For example, you may have a form on your site that allows a visitor to apply for a membership.  While each field may have a title, it may need an explanation so that your visitor knows what exact information is being asked for. 

Let's say your membership form has a field titled “Name.”  If it's membership to an online forum, it could mean the person's real name or their screen name.  Using the Form Notifier plugin, you can add an explanation in the input field that tells them which type of name you are asking for.  When they click in the input field, the explanatory text will automatically disappear.  You can also change the alignment, color, and style of the text in the input field to fit your needs.

Link: http://plugins.jquery.com/project/formnotifier


Namely is a brand new plugin that helps to standardize the capitalized format of names that are entered into your forms' input fields.  For some reason or another, there are people that love to type their names or other things like this: “JoHn SmItH.”  You also have those people who love to type in all CAPS.  These varying styles could get annoying, but the Namely plugin will help to put them all into a single format that makes sense. 

Here are a couple of examples of how Namely works.  If “john smith” is typed into a field, it will convert to John Smith.  Similarly, if “JOHN SMITH” is typed in, it will also convert to “John Smith.”  The plugin converts the input after it is submitted, instead of as the person types.  This helps eliminate any problems on the user end in case they try to reformat their letters and keep getting rejected.

Link: http://plugins.jquery.com/project/Namely

Dirty Forms

It may not have the most appealing or attractive name, but Dirty Forms is a fantastic jQuery plugin for forms that will potentially save your visitors a lot of headaches.  Dirty Forms kicks in to prevent a user from losing data when editing forms.  If the user already entered data into a form and attempts to leave the page, a modal popup box will appear to ask them if they really want to leave the page.  Leaving the page will cause them to lose any changes they have made.  They'll have the option to continue to leave the page or stop.  The plugin is easy to use and offers a nice buffer from the loss of form data.

Link: http://plugins.jquery.com/project/dirty-forms

jQuery Select Autocomplete

This plugin helps convert your select lists into autocomplete text inputs.  By including autocomplete functionality into a search box, for example, visitors can jump to what they are looking for without having to type out entire words.  Such functionality can come into play if a user does not know how to spell an entire word, or if they are looking for suggestions of similar results in an on the fly manner.

Link: http://plugins.jquery.com/project/jquery-select-autocomplete

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials