Nov 23 2010

50 Useful jQuery Plugins to Enhance your Forms

Advertisement

Here we present some useful plugins and tutorials that will let you create awesome forms for your websites — whether it’s a sign up form or contact us form. You can enhance its functionality and usefulness with these plugins. Since these forms are used by the visitors of your website to interact with you, they are of great importance and for this reason you cannot just ignore them as they play an important role in the success of your website. So here we have gathered a bunch of jQuery Plugins, Tutorials and Resources which will help you in improving the effectiveness and beauty of these forms

[fblike]

Useful jQuery Plugins

Turn Any Webform into a Powerful Wizard ( Demo | Download )
The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.
Screenshot

toChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

Screenshot

FlexBox ( Demo | Download )
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.

Screenshot

A fancy contact form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Screenshot

Jquery Collapser ( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements.

Screenshot

asmSelect – Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

Screenshot

JQUERY: DFORM ( Demo | Download )
The jQuery.dForm plugin allows you to create your HTML forms programmatically from

Screenshot

A jQuery Inline Form Validation ( Demo | Download )
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

Screenshot

JQuery plugin for input text field filtering ( Demo | Download )
This is simple JQuery plugin for filtering text input field by using regexp. Only allowed characters will be inserted into input field, others will be silently dropped.

Screenshot

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Screenshot

Simple Validation Plugin ( Demo | Download )
A simple validation plugin that comes in at about 1.5kb.

Screenshot

AutoSuggest jQuery Plugin ( Demo | Download )
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

Screenshot

How to create Skype-like Form buttons using jQuery ( Demo | Download )
If you use Skype then you have probably 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. In this tutorial Janko Jovanovic is going to show you how to create the same button using jQuery and some simple CSS.

Screenshot

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

Screenshot

JavaScript image combo box ( Demo | Download )
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element.

Screenshot

jQuery plugin: Password Valida ( Demo | Download )

Screenshot

prettyCheckboxes ( Demo | Download )
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.

Screenshot

Boxy – Facebook-like dialog/overlay, with frills ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

Screenshot

Enlarge input fields on focus ( Demo | Download )

Screenshot

WordPress contact form without a plugin, using jQuery ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

Screenshot

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

Screenshot

In-Field Labels jQuery Plugin ( Demo | Download )
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.

Screenshot

jQuery Keypad ( Demo | Download )

Screenshot

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Screenshot

Autocomplete ( Demo | Download )
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

Screenshot

jqTransform ( Demo | Download )
This plugin is a jQuery styling plugin wich allows you to skin form elements.

Screenshot

jQuery Validation ( Demo | Download )

Screenshot

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Screenshot

Selecting Multiple Select Form Elements on the Fly ( Demo | Download )
The following jQuery tutorial offers a simplified solution to selecting related select menu options within a form.

Screenshot

timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

Screenshot

AJAX forms ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

Screenshot

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Screenshot

Give Your Characters a NobleCount ( Demo | Download )
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

Screenshot

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

Screenshot

“SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER ( Demo | Download )
If you want to disable your ajax submit buttons when clicked to disallow double submits, jquery.safesubmit makes it simple and safe.

Screenshot

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

Screenshot

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Screenshot

Simple chained combobox ( Demo | Download )

Screenshot

Changing Form Input Styles on Focus with jQuery ( Demo | Download )
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Screenshot

Ajax Upload; A file upload script with progress-bar, drag-and-drop ( Demo | Download )
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Screenshot

Select Multiple Form Fields ( Demo | Download )

Screenshot

Masked Input Plugin ( Demo | Download )

Screenshot

Elastic – Make your textareas grow ( Demo | Download )
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

Screenshot

jQuery “Highlight” Plugin ( Demo | Download )

Screenshot

Ajax Fancy Captcha ( Demo | Download )

Screenshot

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Screenshot

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Screenshot

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Screenshot

Progress Bar ( Demo | Download )
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.

Screenshot

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Screenshot

jQuery.uiSelect ( Demo | Download )

Screenshot

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Screenshot

Useful jQuery Resources

(ik)
[fblike]

About the Author

Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Comments and Discussions
  • julio, 23 November 2010

    All great finds =)

  • martin, 23 November 2010

    Nice one….please more Jquery tuts….thx

  • Rob, 23 November 2010

    Thanks for this useful information!

  • Akash Malik, 23 November 2010

    Amazing plugins, I will be using some of them soon.

  • Awesh bansal, 23 November 2010

    Nice work…!!! :)

  • Batfan, 23 November 2010

    Nice list but, you forgot Validity. Awesome jquery form validator

    http://validity.thatscaptaintoyou.com/

  • shenoyjoseph, 23 November 2010

    a great work these makes alot of time

  • Brandon Cox, 24 November 2010

    Great, now I’ve gotta create 50 new forms to use all this stuff!

  • art, 24 November 2010

    very cool, but I start using niceform to stylize my forms, but jqTransform and Enhance Forms Using jQuery UI much better!

  • dompl, 24 November 2010

    Excellent collection. will set use some of this stuff on my next project. Many thanks!

  • Sahan, 24 November 2010

    Awesome collection, Thanks!

  • Jake, 24 November 2010

    These are great, but since I started using Gravity Forms I no longer need any of them. Almost every single option above is available with zero coding required.

    (no, I don’t work for Gravity Forms… just a satisfied user)

  • Vivek Parmar, 25 November 2010

    that’s a huge list shared list with us. thanks for sharing didn’t know many of them now i will know and use some of them

  • warawat, 27 November 2010

    Very nice solution.

  • Curtis Scott, 29 November 2010

    Great list with some amazing functionality, I have to check out the Gravity Forms, I’ve been hearing great things about them.

  • Anees, 13 December 2010

    thanks all jQureys very nice

  • Chochex, 08 January 2011

    Ufff exelente, grasias!!!!

  • Martin, 12 January 2011

    Great selection. :-)

    I don’t suppose you have one for displaying .gif images clickable images within the same Content Editor Web Part?

    [I have a series four levels of organisation images linked via hotspots (using the and tags). I would like to display one team (child) image below it's respective manager (parent) image, after each manager hotspot is clicked. (if you get my drift!)]

    • Martin, 12 January 2011

      Correction:

      I don’t suppose you have one for displaying clickable .gif images within the same Content Editor Web Part?

      … (using Area and Map tags) …

  • IWT, 21 January 2011

    It is a really helpful and inspiring work.
    Thanks!

  • Bob, 17 June 2011

    Nice resource dude, thanks :)

  • trompyx, 02 September 2011

    Thanks for this useful information!

  • darwin, 15 October 2011

    thanks so much for this,
    very nice, it is very useful, thank really for this

  • bansal, 09 September 2012

    I was looking gmail style file upload script and found here.
    Thanks for sharing uploadify

search form
 
image description image description