30+ jQuery Forms Plugins to Improve Form Usability

Forms are essential for communication online and they are the single most important interface to collect information from users.

Why not spice you forms up a bit and make your site more appealing and user friendly? This post will help you get an idea of what what is possible to achieve with a few lines of simple jQuery code ans the right jQuery forms plugins.

There are also many other areas where jQuery can be useful, one example us jQuery carousel plugins as they can really make a sales page or website front page stand out. Or you could go for a regular WordPress form plugin to extend the basic capabilities.
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Skinning and improving look and feel of HTML forms with jQuery forms plugins

jqTransform

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

Checkbox and Radio Input Replacement

This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = “crirHiddenJS”, an id, and a proper label tag.

This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.

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.

jQuery Checkbox

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

Pretty Checkboxes with jQuery

Turn check boxes into what you see below using some CSS and jQuery. You can see this simple demo here.

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

Custom Form Element

Enhances checkboxes, radiobuttons, fileupload, textinput, textarea, select, submit, reset, image, all elements are completely stylable via CSS

jQuery Impromptu

Query Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

Highlight

Highlight increases usability by highlighting 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 you specify.

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.

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

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

ASM Select

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

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.

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

jQuery UI Multiselect

Another attempt of a sortable, searchable multiple select widge. It depends on jQuery 1.3 and jQuery UI 1.7. The widget is styleable using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.

Image buttons for jQuery Forms

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.

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.

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.

Simple Image Submit Button Rollovers with jQuery

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

Labels and tooltips with jQuery Forms Plugins

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.

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.

bassistance

jTip

• View Demo
• Source

• View Demo
• Source

jQuery Input Floating Hint Box

• View Demo
• Source

Auto adjust forms with jQuery Forms Plugins

jQuery plugin: ‘autoResize’

This is an animating ‘autoResize’ jQuery plugin adjusting the text field height as needed.

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

Wizard style forms with jQuery

Create a Progress Bar With Javascript

The progress bar is currently only determinate, which means when we update it, we have to tell it explicitly what its value is, and we must know beforehand when the process it is used to measure completes. This widget is not currently the best choice for a process which will take an indeterminate length of time to complete.
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. A plugin is also available for download. demo

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..

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.