Web forms are important part of websites to accept user inputs. These are used for user login, registration, search, feedback, contact pages etc. But in general, most of users do not like to fill forms, especially long forms. Now with the jQuery, CSS3 and HTML5, it’s very easy to style form element in way to attract users by improving user experiance.
In this article, I have collected 30 best jQuery form plugin to help web developer to create user friendly web forms with styled elements. So enjoy!
jQuery Selectify
If you’re thinking styled select element then this plugin for you. This is nice jQuery form plugin that turns select element into a stylable and customizable element. This makes select element to receive focus and blur. When focussed, all key strokes for selecting elements will work including browsing by pressing the up and down keys.
Fancy Form
Fancy Form is a jQuery form plugin to create beautiful web forms. The plugin provides options to customize forms fields, validate form, handle ajax request and much more to make your forms beautiful and user friendly.
In-Field Labels jQuery Plugin
This is a awesome jQuery plugin that turns properly formatted HTML forms into forms with in-field label support. The input labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
Expanding Search Bar with jQuery
jQuery plugin to create beautiful expanding search bar with jQuery, CSS and HTML.
Progression.js
This is a first ever jQuery plugin that gives users real time hints & progress updates as they complete forms.
iCheck
iCheck is a great jQuery plugin that allows developers to style radio buttons and checkboxes within forms. It’s highly customizaable with many different skins like Flat, Square, or Polaris that you can choose to theme of your form. You can also change the color scheme on each of these skins.
Nod
Nod is a jQuery plugin for validating any type of input you can possibly think about. Just check out the plugin to get an idea of how this validation can work in the real world.
Fort.js
Fort.js is supar small jQuery plugin to show progress bar for form completion. You just need to create form, Fort.js’ algorithm will take care of the rest.
Creditly.js
Creditly.js is very useful jQuery plugin to create a sleek, intuitive credit card form. Just copy the html, css, and javascript to get an intuitive credit card form with validations in seconds.
Bselect
This is a lightweight JQuery plugin select plugin for Twitter Bootstrap. It provides Bootstrap-like dropdown decorator for select elements. It doesn’t require any Bootstrap CSS or JS to work.
The select decorator component that was missing for Twitter Bootstrap.
nextVal
nextVal is an easy-to-use flexible and robust jQuery form vlidation plugin with multiple validation options.
prettyCheckable
prettyCheckable is a awesoome jQuery form plugin that convert default checkboxes and radio inputs into beautiful checkboxes and radio buttons.
jQuery.validationEngine
Query validation engine is a Javascript plugin provides validation of form fields with visually appealing prompts that grab user attention on the subject matter. The plugin validates email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Also the the error prompts can be translated into the language of your choice.
Formly
This is amazing jQuery plugin to add style and validation to your forms. Using this plugin, you can add style, validation, and a more impressive user interaction with a single function.
Multi-select.js
It is really an useful jQuery form plugin for the standard select with multiple select feature.
Autosize
Autosize is a jQuery plugin for dynamic textarea sizing. If you need a text area to resize dynamically with text increases. Then its best for you, it allow dynamic resizing of textarea height, so that it grows as based on visitor input.
HeapBox
HeapBox is a featured jQuery plugin to handle native HTML form element to make it beautiful and customizable. It is fully keyboard accessible with events, callbacks, themes and more features.
hideShowPassword
Chained is simple jQuery form plugin for chained selects. It works with both jQuery and Zepto. You can choose from two different versions. Use jquery.chained.js if you do not want to make external queries for setting content of child selects. This version uses classnames of select options to decide content.
Chained Selects
Minimalect
Minimalect is a minimal jQuery form plugin for select element. It replace select elements with a nicer styled control with support for optgroups
Password Validation
This is also a useful JQuery form plugin for validating passowrds. The plugin validates password using a function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional). A custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. The text displayed can be localized.
Niceforms
Niceforms is a jQuery form plugin that replace the most commonly used form elements with custom designed ones.
Ideal Forms
Ideal forms is great jQuery form plugin that creates smaller, faster and extensible form. The plugin provides responsive form to users to show in steps with fewer fields that comes after clicking next button that makes it more use friendly.
Credit Card Validation
Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.
Validetta
Validetta is jQuery form plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure.
jQuery FormHelp
FormHelp is a jQuery form plugin that provide contextual help on input fields in a form. This plugin gives you an easy way to place contextual help at every input field in a form. All you have to do is insert a span element with the helptext and a reference to the corresponding input field and this plugin does the heavy work for you.
jQuery Feedback Me Plugin
This jQuery plug-in allows user to easily add an animatable UI widget with a feedback form which slides from the side of the screen.
rangeslider.js
This is awesome touch screen friendly jQuery form plugin that helps you to create beautiful HTML5 Input Range Slider Element Polyfill.
jQuery On-Off Toggle Switch
jQuery On-Off Toggle Switch is for web form to change when clicked or tapped, animating side-to-side as they toggle.
Add Clear – jQuery Plugin
jQuery Plugin to add a (x) clear button to your input fields.
Good list.
I use Fancy Form from this list.
Thanks Mikhail. I am very happy it helped you.