Easy user interaction and data collection is really a key functionality on most websites and web applications. In this post we have showcased 75 most useful & essential jQuery Form Plugins.
validity
jQuery.validity is a plugin designed to aid in the configuration of clientside form-validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward. jQuery.validity is easy to learn and use. It’s totally appropriate in simple validation scenarios, but it’s also designed to cleanly and naturally tackle more complex, dynamic, or conditional scenarios. jQuery.validity takes advantage of jQuery’s selector engine to perform validation on logical groupings of inputs, making it declarative and clean. This means that the inputs on a page can be added, removed, or changed and validation will still work without reconfiguration.
jQuery.validity is designed to give you total control over how validation messages appear, so you can easily adapt the way validation errors are displayed to the look and feel of your site.
Chosen
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
jQuery Mask Plugin
A jQuery Plugin to make masks on form fields and html elements.
live tag input
Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data, your form just sees a comma-delimited list of tags!
Tokeninput
Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.
EasyAjax_Form
Easy Ajax Form turns boring, static HTML forms into dynamic web components by adding validation and Ajax capability. You write zero lines of JavaScript.All you have to do is add specific Easy Ajax Form markers to your HTML class attributes, like this:You have now created a form field that will be validated as required and email!In addition to customizing validation for each field, you can also choose to turn off validation or Ajax capabilities for the entire form without writing any JavaScript.
plum.Form
plum.form is the perfect tool for designers who need to step over the boundaries of boring web forms. It simplifies the process of creating perfect forms that look beautiful and add extra features to your web site.Other than a bit of JavaScript and some CSS, there’s really nothing extra you need. Plum focuses its power on forms or individual form elements and creates HTML wrappers on the fly.
Attention
Attention Box is a simple and lightweight jQuery plugin that helps push important messages onto the screen and your users. Its subtle and beautiful see-through background makes it blend into any design. It also can take user inputs along with other features listed below and includes a very easy to follow documentation on the demo page.
Wizard
WizardPro allows you to create website wizards in just a few minutes. You can use this plugin for almost anything that requires a few steps, like a application installer, a signup or contact form.
Simple Contact Form
Finished retrieve each value of a form in JS and PHP , and re-write the labels in the content of email.
With jQuery Simple Contact Form, you can install an ajax contact form on your website, writing only the form html code and one js code line.
ws:combo
ws:combo is a JavaScript component, built on top of jQuery, used to replace the standard HTML select element with more advanced UI control.ws:combo can transform your existing select elements into visually attractive controls that can be easily styled with CSS to match your website look & feel.
Download ws:combo →
LeValidate
LeValidate gives you ability to validate forms by rules that are very easy to set along with css3 dynamic notification box which you can modify as you like.
Pure
Pure CSS3 Forms Set allows you to create forms of any complexity and for any needs (login, registration, contacts, search, checkout, etc.). With powerful validation and masking your forms become super friendly and very easy to fill.
formReplacer
The biggest benefit is of course the ability to style those elements however you like!Say goodbye to the pesky and inconsistent styling. Each element is created using common HTML elements like spans and lists.
Contact Tabs
A jQuery form generator for creating unlimited slide-out or static contact tabs containing AJAX powered customised forms. Plugin includes 12 different form elements and client-side validation.
Login register form with jQuery Validation
Clean and usable login & register form is for every developer. It’s very fast CSS form with jQuery validation. Error handling, social buttons and forgotten password handling is in there.
jic
JIC is a jquery plugin that makes simple to customize your checkbox and radio buttons by using your own images.
It works with all the major browsers including ie6 and with all the version of jquery between 1.2.3 and upWith JIC you can make custom checkboxes (multi-selection) and custom radios (mono-selection) with few lines of code, then you can choose the selection mode you like between suffix and overlay, so you can have maximum flexibility.JIC has a simple interface and some powerful options so you can customize the way it works.
Tag Form jQuery
Age Block
This is an extremely handy Jquery plugin to have if you have an age restricted site. If you have an existing PHP page blocker, why not add a creative supplement system into your site. This is a Jquery based plugin that will prompt your user to fill in birth date information in order to get access to your site.
Auto
For a more advanced form builder, take a look at Master Form BuilderThe “Form Builder – made easy” script is a Javascript helping you as a developer and/or designer to create valid HTML5 forms with ease; without having to remember all available input fields and attributes or the new HTML5 standards and options. This script generates all HTML form input automatically after your specifications. You do not need to install anything or run any type of server to get this script up and running.
Metro Login
This is a Login form that use CSS3 and jQuery Tricks to look like windows 8 login screen.The PHP side, you have an easy way to get the username, password, remember me checkbox, selected background color and selected background image. So you can store those values to restore them later.Also works on tablets and mobile devises.
jQuery Banner Message
This smart plugin, helps you get your viewer’s attention really easily. It comes in four bright, yet gentle colors, to match any color scheme. If that isn’t enough, you can customise the colors to your hearts content via CSS . All images are available in Photoshop layered files.
gbRichEdit
gbRichEdit is a rich text editor plugin for jQuery, easy to attach to (X)HTML textarea elements. It creates the most basic editing options such as bold text, italic text, ordered and unordered list, link and image insertion. The plugin also features an (X)HTML button for easy switching to source view.
Datagrid
oCombo
oCombo is a jQuery plugin that convert your selectboxes into an imposing components. If you require images for your selectbox items, oCombo is a perfect solution for your site.It provides simple and flexible way of changing your selectboxes into a image-integrated selectboxes.
ForMeter
EditMe
Inline edit for input boxes AND textareas, using jQuery.All you need to do is to and an input box with the type of text in your markup, call this script and you can now edit your content.
Selective
jQuery Foggle is a plugin that lets you interact with various form elements based on user-input. It lets you choose which elements to enable (or disable) while the user fills out the form.
Responsive HTML5 jQuery Sign Inregistration Form
Summer
Summer Forms are coupled login and registration forms having a set of impressing effects bundled with the bright modern design. The flexibility of these responsive forms allows placing it into any area on your site (like a widget, like a popup window, like a standalone page).
Input and textarea customizer
tInput is a textarea and input manager plugin for jQuery.
Image Select
Allows to use images as options of HTML select element. Easy to use and customize. Full touchscreen support.The plugin has two display modes: drop-down (up, left, etc.) list and checkbox / radio button. In second display mode you can specify the number of images that will be displayed and choose the axis of scrollbar. There are several options of themes and skins. Plugin has own select tag styles which can be easily modified.
Finder
Finder is a jQuery plugin that replaces indented select elements creating a true hierarchical UI element for a much smoother user experience when navigating large sets of hierarchical data. It utilizes built-in jQuery ui icons when the library is present but falls back gracefully if not.
jQuery IOS5 checkboxes
Lively
Lively Validator is the jQuery plugin that validates form input data. It checks that only valid data is submitted, and also provides a user-friendly, responsive and lively interface to guide users as they fill out a form. With a selection of over 30 different validation types including required, confirm, alphabetic, credit card numbers, minimum and maximum number or characters, file size, file type and dates.
Google analytics query form optimizer
You will be able to make your forms much more intuitive by knowing wich fields cause users to abandon the form and wich fields are too complicated and consume too much of your users time.Keep an eye on the time users spend filling out each field, if it takes too long the chances are high you can simplify and optimize this part.
Master Form Builder
The Master Form Builder is a simple tool for creating advanced HTML forms with features such as conditional fields, client and server side validation, sending email, uploading files and adding custom validation callbacks. All features are already embeded and ready to work out of the box – no coding required! Start building your forms with validations and conditions and just copy and paste the generated source code to your server.
jQuery & PHP powered easy form
Looking for a simple contact form that has nice, user friendly validation? You’ve found it.This form loves validation.
Switch Form
Switch Form is a simple animated form. The user can change form without loading a new page.
iPass
iPass jQuery plugin makes your password input field to an Iphone-like masked password input field.Easy to integrate into any website.
Validate
This component allows you to perform simple validation on your HTML forms, such as……as well as implement ‘hint’ functionality and duplicate values from one set of fields to another (such as when ticking a checkbox when your delivery address is the same as your billing address).
Twitter Bootstrap modal is plugin of Twitter bootstrap.
Pure Input Tools For Text Fields
Pure Input adds enhanced features to an ordinary HTML input text field. The input allows for a hint, autocomplete search (local and remote), automatic resizing as you type, the ability to tag items using the autocomplete search, navigable tokenization for adding tokens within the input, and validation of the input based on its value or the selected tokens.Pure Input is build using object oriented JavaScript for use with jQuery, and allows for many listeners, options, and an interface of public methods. Includes a simple theme stylesheet for custom styling.
PassReview
PassReview is a jQuery plugin that allows you to easily integrate powerful password validation into your forms.
Image Select Input
Fancy CSS3 based Image Selector input for selecting options with thumbnails. Extremely easy to implement, can be implemented multiple times in one form easily, sleek CSS3 image free design. A light weight solution to any form requiring users to select options with thumbnails.
TextLimit
TextLimit is written in JavaScript, with no JS Libraries. It allows website authors to limit how many characters that a user can enter into a TextArea.Another feature of TextLimit allows you to limit how many words can be entered into a TextArea, as well as how many characters each word can contain.TextLimit is very easy to use. Once the JS file is included in the webpage, you just have to add a single rel tag to the TextArea’s you would like to limit. e.g.
Select beautify
It acts just as real select element , it supports many keyboard enent , mouse evnet and it trigger the change event of origin select when you change the value.
Where we are contact form
JQuery plugins that provide you to do a fancy contact form. it’s very easy to use and integrate into your projects, and it’s 100% customizable. it has a map that point in your location and you can give your clients the possibility to call the route from their location to your location. You can center map in a specific location when page is loaded and write some text (or HTML ) in ifnowindow on the map.
jStyle
jStyle Lite is a lightweight form styling tool built on the jQuery framework. At just over 5kb in size, it provides a quick way to easily take control of the styling of your web forms without leaving a huge footprint. In addition, it requires absolutely no extra HTML markup!Since the advent of CSS , styling web forms has not only been a hassle, but for some form elements, styling was simply impossible.
Metro
MetroLogin is a Windows 8’s Login form simulator that gives you this ability to make a login page for your website’s users or a login Page for your admin panel with a nice metro design.
Auto Form Validator
The script automatically checks all required elements in order to make sure that they are NOT only empty before allowing the form submission, but also that the surfer entered a valid type value.
Minimalistic
Minimalistic Designed Login, Register and Forgot Template Forms Pack. Packed with jQuery Live Validation, 7 color styles, 3 different form size options, title animation, custom checkbox, tooltip hints and jQuery Error Handling.
addelfields
multivalidator
Multivalidator is an ajax form validator with unique features, captcha that increases the user experience and protect your forms, supports regular expressions, ajax callbacks and his appearance is fully customizable.
Gmail-style
jQuery.checkRow is a plugin that lets you highlight rows of a table when the user checks a checkbox. You can highlight either a single row or all rows by a single checkbox!
Glow
Glow Checkbox and Radio Buttons is a combination of CSS3 and jQuery that builds rounded, glowing push-buttons over traditional elements.
CForm
CForms uses xml files to configure forms. There are only few options to setup and your form will be generated at request time. You get a couple of pre factored forms with the download package to start with.Additionally you get a complete login script with a login form and all necessary php and html files.
iX
iX Designer is a javascript form designer for you with iX Framework. You can easily design complex form with title, tabs, toolbar, field and buttons with less or no coding at all.
Data saver
This plugin saves data from input fields to local storage and can restore data if you reopen “form”.
Scrolling
A clean, modern, flat HTML and Javascript form template that can be fully customised through Javascript options and CSS.The form is fully responsive, works cross browser and includes a smooth scrolling effect to move between the different sections of the form.
Amazing file upload
This jQuery plug-in is a custom file upload control. File upload control is used in almost all the websites. But the restriction of not been able to alter the style/look of it, makes it different from website theme.
Check if changes saved plugin
There are situations when we need some links to be on the same page we have a form on. And when we clicks them – the new page is loaded making us loose the changes we made in the form.This plugin checks if there have been any changes to the form before we leave the page, and if there have – we can either save or discard them or stop leaving the page.
Ready to send mailer
Ready to Send Email has packed everything you need to include a contact form on your website easily, include CSS3 animations, Ajax functionality, php example files, send email using SMTP, Google address autocomplete, shows your location in full screen, drag to show control, JQuery validation, customized textboxes and buttons, 2 Base colors, 2 display types, 3 email layouts , 3 html templates included for send attractive html emails, 8 themes 8 social links to choose.
JQ-HighLight
it is a JQuery plugins that provide to Highlight the forms’ fields while you fill them.it’s very easy to use and integrate into your projects.
FormMapper
An advanced jQuery plugin that utilizes the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide a single input field that lets you search for locations with an autocomplete dropdown. Optionally: you can add a map container that will display an interactive map with drag and drop location finding capabilities and a form that will be populated with the complete address details including the latitude and longitude coordinates.
QuickClick
QuickClick is very useful thing for any website.
Selectsorter
jQuery script for sorting a select box’s option elements.
Laby
Laby is a jQuery plugin that formats text input fields with unobtrusive labels featuring interactive suggestions. This allows input fields to be labelled clearly and presented with minimal interface obstruction.
sortselect
jQuery SortSelect plugin will help you make your select fields more user friendly when you have a lot of options. Works great with options like cities, countries and many more.