20 jQuery Plugins and Tutorials to Enhance Forms

In this post we have a selection of jQuery plugins and tutorials for enhancing and aiding in the development of the dreaded form area. There are the always important validation plugins, plugins that will give the form added functionality (stretching text-areas, auto-tabbing…) and also plugins that will help you to style the form exactly as you need…and more.

In-Field Labels jQuery Plugin

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.
View the Demo »

Jqtransform – jQuery form plugin

This plugin is a jQuery styling plugin wich allows you to skin form elements and transform the entire look an d feel of the form.
View the Demo »

A jQuery Inline Form Validation, because Validation is a Mess

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the 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 corner and shadow are done with CSS3 and degrade well in non compliant browsers.
View the Demo »

ClearField

This plugin takes care of your input fields. Often used by opt-in input fields where the default value of the field is something like "Your e-mail address". If you click the field the text disappears so that you can type your e-mail address.
View the Demo »

Justify Elements Using jQuery and CSS – Tutorial

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don't want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.

Autotab: jQuery auto-tabbing and filter 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.
View the Demo »

Autocomplete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. 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.
View the Demo »

jQuery Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easier than this!

jQuery Shiftcheckbox Plugin

The jQuery Shiftcheckbox Plugin allows you to select a range of consecutive checkboxes with just two clicks. The plugin is inspired by the GMail checkboxes functionality and works exactly the same. Just keep the 'Shift' key pressed and select a starting checkbox and the last checkbox that you want to select.
View the Demo »

Sexy Combo jQuery Plugin

Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes. The user can choose whether to select option from the dropdown list or just type it.
View the Demo »

jQuery Comment Preview – Tutorial

jQuery Comment Preview plugin not only gives site users the chance to preview a comment they have posted, it also allows them to preview it in real time, and it is simply awesome. There is also a MooTools version of this tutorial.
View the Demo »

jQuery "Highlight" Plugin

jQuery "Highlight" plugin increases usability by highlighting elements within a form as you interact with each element. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
View the Demo »

Select Multiple Form Fields

Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple. While useful and necessary, the select multiple form field has always been a usability challenge. The Select Multiple Form Fields plugin offers a really cool solution, click the demo button to see for yourself.
View the Demo »

Ajax Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page).
View the Demo »

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.
View the Demo »

meioMask – a jQuery Mask Form Input Plugin

meioMask jQuery plugin is a simple to use plugin for creating and applying maskstot text input fields.
View the Demo »

jQuery Watermarks for Inputfields

Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That’s exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible.
View the Demo »

JavaScript HTML-Form Encryption Plugin – jCryption

jCryption is a JavaScript HTML-Form encryption plugin, which encrypts the POST/GET data submitted by forms. Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. So in this situation jCryption plugin helps you to encrypt your data very easily.
View the Demo »

Elastic – Make Your Textareas Grow

This Jquery plugin makes your textareas grow and shrink to fit it's content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it's competitors is it's weight.
View the Demo »

jQuery plugin: Password Validation

This plugin extends the jQuery validation plugin by providing two components: 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 another function that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. You can also easily customize the appearance of the strength meter and localize the messages and integrate it into existing forms.
View the Demo »

You might also like…

30 Tutorials Combining Both WordPress and jQuery »
25 Fresh and New jQuery Plugins and Tutorials »
50 Useful Tools and Generators for Easy CSS Developmentc »
20+ Resources and Tutorials for Creative Forms using CSS » »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials » »
22 CSS Button Styling Tutorials and Techniques » »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials » »
51 Amazing and Inspiring Blog Style Web Designs » »
6 Alternative Sources of Design Inspiration, Where do you get yours? » »
8 Amazing Free Online Creative Portfolio Community Sites – Share and Inspire » »
20 Inspirational Resources for Logos and Logotypes – Get Creative! » »