30+ jQuery Forms Plugins to Improve Form Usability

May 19, 2013 · 18 comments

by Lars

 Improve Usability and Look and Feel of HTML Forms

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.



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


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.



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



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



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.



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 tool tip overview


jQuery tool tip overview

jQuery Input Floating Hint Box

jQuery tool tip overview

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



{ 3 comments… read them below or add one }

DavCid November 17, 2011 at 9:58 pm

great! thanks for the resources, you guide me to find this Wizard style forms and also I found great jquery plugin too not listed yet to your site, I’m sharing it… http://www.devstring.com/jlogin/


Esmalte August 10, 2011 at 7:32 pm

Submit your desktop, and see others!! Great post!!


Seeta Gill February 11, 2010 at 10:31 pm

Beware the onChange submit(), doesnot work with the niceforms javascript. So just linked to the CSS, in the end.


Leave a Reply

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

{ 15 trackbacks }

Previous post:

Next post:

Web Analytics