50+ jQuery Plugins for Form Enhancements

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. A few cheat sheets have been added as well.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Cheat Sheets

jQuery Cheat sheets are always nice to have
oscarotero jquery 1.3 (as wallpaper)

colorcharge jQuery 1.2
jQuery 1.3 Cheat Sheet

Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

jQuery Cheat Sheet 1.2

jQuery Form Element Enhancements

File Style Plugin for jQuery

File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

jQuery jNice

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

Geogoer VChecks

Avery user friendly way to show checkboxes.

Styling input file

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

Emblematiq Niceforms

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.

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

Password Strength Indicator

Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good

jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Password Indicator

This is example is a merging of Benjamin Sterling’s Password Strength Indicator and Microsoft Passport’s Password Strength CSS.

Demo

Ajax Username Checker

It’ll validate against your username records so that a user can choose a unique name straight away.

jQuery Checkbox

Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

Form Masking with jQuery

Meio Mask

meioMask is a simple use plugin for creating and applying masks at text input fields.

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

• a – Represents an alpha character (A-Z,a-z)
• 9 – Represents a numeric character (0-9)
• * – Represents an alphanumeric character (A-Z,a-z,0-9)

Form Tool tips

The jQuery Tooltip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

Form Element Manipulation

jQuery Field Plug-in

This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method (and Mike Alsup’s Form Plug-in’s fieldArray() method) by allowing you to interact with all types of form field elements (except input[type=”file”], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements.

Using form labels as text field values

New jQuery plugin targeting usability for password masking on forms

ToggleVal

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.

jQuery magicpreview plug-in

magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

jQuery autosave plug-in

Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong

The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

Form techniques

jQuery Sliding Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo

jQuery – Ajax Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo

jQuery – Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo

jQuery Contact Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

Submit A Form Without Page Refresh using jQuery

Calendars and date pickers

Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event)

Demo

jQuery UI Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

Demo

Date Picker

Date Picker component with a lot of options and easy to fit in your web application.

Demo

Simple jQuery Date Picker

Simple date picker script. Author requests assistance for adding improvements.

Demo

jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application.  It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Demo

jMonthCalendar

MonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Demo

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

Auto complete

Auto Complete

Are you trying to build a custom search feature for a site? The Auto Complete jQuery plugin can supercharge your form inputs with additional user feature.

AjaxDaddy jQuery Auto Complete

This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc.

Bassistance jQuery Auto Complete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

jQuery Pagers

jQuery pager plug-in

Pagination

jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination

jQuery paginator plugin file already includes the required jQuery pagination plugin.

Demo

jQuery hot key plugins

jQuery shortKeys plug-in

Hot Keys

jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.

Demo

jQuery Sliders

slider

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

Creating a Nice Slider With jQuery UI

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

jQuery File Uploaders

Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

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). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. Demo

Virtual Keyboard for Form Input Elements

Customizable jQuery Virtual Keypad Plugin

jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.

Virtual Keyboard with jQuery Tutorial

Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).

Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.