Lets be honest, forms can be a pain in the ass to fill in. And for developers? There an even bigger pain in the ass to build. No one really likes them, as such, the most difficult challenges that a developer has to take on, when it comes to forms, is not only how to build a form that is easy and quick for the user to use, but also make it as accessible and usable as possible. Its not easy.
In this article we have collected 50 jQuery plugins to help you build powerful forms. If you are looking for solutions to any from issue, you will find the jQuery plugin solution here.
Form Functionality Plugins
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas from Facebook.
Elastic – Make your textareas grow »
Highlight increases usability of forms by highlighting the elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element that you specify.
jQuery “Highlight” Plugin »
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
Autotab: jQuery Auto-Tabbing and Filtering »
Ajax Fancy Captcha helps you protect your web pages from bots and spammers by using a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop a specified item into a circle.
Ajax Fancy Captcha »
ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.
Form Encyription and Password Security
Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is not supported by every webhost nor it’s easy to install/apply at times. So in this situation the jCryption plugin helps you to encrypt your data with ease.
This plugin offers a function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional) and gives a custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating.
Password Validation Plugin »
Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password. It makes the assumption that it is possible to test 2800 million passwords per second.
Password Strength »
The Password Strength Meter works by presenting a global variable score and at the end of the algorithm the plugin will decide the passwords strength according to the score value.
Password Strength Meter v2 »
Form Mask Plugin
Form Upload Plugins
Uploadify is a plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
This plugin will augment a standard file upload form with a transparent background upload and add a progress meter that will keep you graphically informed.
jQuery Uploadprogress »
Form Skinning and Customisation
This plugin is a jQuery styling plugin which allows you to skin form elements with relative ease.
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
In-Field Labels jQuery Plugin »
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.
jNice makes it easy to style rough and simple html forms into beautiful web forms, checkboxes, input elements and selectboxes by creating custom looking form elements, that function just like normal form elements.
Form Select and Combo Boxes
This plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.
Two Sided Multi Selector »
flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
Form Time and Date Pickers
This is a clean, flexible and unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages.
jQuery datePicker »
The jQuery Week Calendar plugin provides a simple and flexible way of including a weekly calendar in your application and has been inspired by other online weekly calendars such as Google calendar.
jQuery Week Calendar »
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
Ajax Autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields with every query result being cached and pulled from local cache for the same repeating query. If there are no results for a particular query it stops sending requests to the server for other queries with the same root.
Ajax Autocomplete »
FaceBook Like is a powerful jQuery plugin that transform an input field into a real time autocompletion search engine, designed, as the name suggests, similiar to the one on Facebook.
FaceBook LikePlugin »
Form Validation Plugins
When an error needs to be displayed, this script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corners and shadows are pure CSS3 and degrade well in non compliant browsers.
With this highly customizable plugin the user can set his own class to define the rule, set events onError and OnValid for a particular class and you can also add their own effects, may be jquery animate().
Highly Customizable Form Validation »
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
This plugin helps you to easily create form validations with high flexibility and is a packaged with a huge set of options.
jQuery Live Form Validation »
Valid8 – An input field validation plugin »
The Original jQuery Plugin
And if all of the rest of the plugins on this page can’t help, you can always rely on the original jQuery form plugin: jQuery Form Plugin »