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.


ElegantThemes
ThemeForest

Advertisement

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.

javascript-frameworks

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.

jqueryforms

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.

jqueryforms

jQuery Checkbox

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

jqueryforms

Pretty Checkboxes with jQuery

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

jqueryforms

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.

jqueryforms

Custom Form Element

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

jqueryforms

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.

jqueryforms

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

jqueryforms

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.

jqueryforms

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.

jqueryforms

jQuery jNice

javascript-frameworks

jquery.Combobox

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

jqueryforms

Geogoer VChecks

Avery user friendly way to show checkboxes.

javascript-frameworks

Styling input file

javascript-frameworks

mcDropdown

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

jquery-form-enhancements

ASM Select

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

jquery-form-enhancements

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.

javascript-frameworks

Uniform

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

jqueryforms

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.

jqueryforms

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.

jqueryforms

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.

jqueryforms

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.

jqueryforms

Simple Image Submit Button Rollovers with jQuery

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

slideshow

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.

jqueryforms

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

bassistance

jQuery tool tip overview

jTip

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.

jqueryforms

… 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

jqueryforms

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

 

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

Reply

Esmalte August 10, 2011 at 7:32 pm

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

Reply

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.

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>

{ 15 trackbacks }

Previous post:

Next post:


Web Analytics