10+ jQuery Form Enhancement Plugins

May 19, 2013 · 12 comments

by Lars

decay-texture

Easy user interaction and data collection is really a key functionality on most websites and web applications. Providing users high quality and intuitive input forms may be just what is needed to make your users take the time to fill in and submit the information you’re trying to collect. In this article I have collected a number of really essential jQuery Form Enhancements. Another very popular use of jQuery is jQuery image sliders that can be used to spice up a front page or sales page significantly.


ElegantThemes
ThemeForest

Advertisement

Baby Steps

This plugin provides a simple and easily configurable solution for turning long forms into broken out steps without going from page to page.It works well like a wizard where users can go back and correct inputs if needed. This is really a handy tool if you need to collect a lot of information from users as one huge form introduces a risk that users drop filling in all fields and goes on to something else..

jquery-form-enhancements

jQuery auto-tabbing and filter plugin

Autotab provides smart auto-tabbing and filtering on text fields in a form. Simply put: once you have typed the maximum number of characters in a text field, you will automatically have focus on the next defined text field. The plugin also offers a mask / filter function to ensure that only valid characters can be put in.

jquery-form-enhancements

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! There’s a few good demos and examples on the plugins use here.

jquery-form-enhancements

Access Key Highlighter

The Access Key Highlighter plugin provides various options for highlighting access keys on web forms when the user presses their browser’s access key shortcut key, e.g. Alt in Internet Explorer and Safari, Shift+Alt in Firefox.

jquery-form-enhancements

BS Form Accelerator

With this plugin you will be able to use Enter or Space buttons in your forms replacing the buttons such as Tab for changing focus in fields just with assigning an ID to the form. This plugin may not be applicable to most public applications as changing basic browser behaviour may confuse users. In some cases it is on the other hand very useful to avoid that users submit a form simply by hitting Enter.

jquery-form-enhancements

Radiobutton- und Checkbox-Replacement

Replaces radiobuttons and checkboxes with a more skinable Version.

jquery-form-enhancements

ASM Select

This plugin provides an enhancement to multiple select boxes that is worth taking a look at.

jquery-form-enhancements

Auto-growing textareas

This plugin makes it easy to have auto-growing textareas. Meaning, if you have a textarea, as the user types it will expand vertically to accommodate the size of the entry. This was inspired by Facebook’s auto-expanding text areas. Demo

To make a textarea autogrow, simply do this

$(‘textarea’).autogrow();
$(‘textarea.classname’).autogrow();

Similar plugin is: Bigger Textarea

Checkbox group

Checkbox checkall with group and set max items group can select

jquery-form-enhancements

Checkbox Area Select

This plugin allows users to check or uncheck large groups of checkboxes quickly. When the user drags the mouse a red highlighting box follows the area that they have draged over. Any checkboxes within the highlit area will be checked. If the user shifts and drags then any checkboxes in the highlit area will be unchecked.

jquery-form-enhancements

clearField

Know the effect used in the Google Custom Search input field? This plugin provides a similar effect in a very simple way. This is 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.

jquery-form-enhancements

 

{ 3 comments… read them below or add one }

Damian Edwards February 14, 2011 at 11:34 pm
Lars February 15, 2011 at 7:49 am

Thanks Damian!

Reply

Vernon October 22, 2009 at 2:29 pm

Hey guys – You might want to take a look at your htaccess file or whatever you’re using to prevent hotlinking. All I see is the theft image.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 9 trackbacks }

Previous post:

Next post:


Web Analytics