50 Useful jQuery Plugins to Enhance your Forms
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
Useful jQuery Plugins
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
File Style jQuery ( Demo | Download )
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!
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.
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.
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.
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.
Useful jQuery Resources
- All About jQuery: Plugins, Tutorials and Resources
A bunch of exciting and awesome jQuery plugins for your personal use.
- jQuery Techniques and Plugins
40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
- Useful jQuery Plugins for Slideshows, Graphs and Text Effects
35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.
- 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
- Amazing and Fresh jQuery Plugins
25 of the best newly (or, pretty close to new) released jQuery plugins.
- 40 Exceptional jQuery Interface Techniques and Tutorials
Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.
- 40+ Excellent jQuery Tutorials
Various jQuery Tutorials for your source of inspiration.
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.