There are a plethora of jQuery plugins when it comes to forms. You could spend much of your precious time trying to decipher which are worth your while, or you could read this top ten list that simplifies the selection process for you. Here are ten of the top jQuery plugins that deal with the various aspects of forms.
The jqTransform plugin was created to allow you to skin form elements to get an updated look for forms on your website. Default forms often have a plain look that will appear according to how your browser wants it to. Using jqTransform let's you take the same default form and skin it with the options of your choice. You can improve the look of your radio buttons, affect how the input fields change color when you hover over or click in them, change any check boxes, drop-down menus, and more. The plugin gives you the option to customize your form by editing the CSS file and is easy to use.
Form Notifier is a very small and simple plugin that offers sizable impact to your forms. The plugin helps convert the input fields on your forms so that they display text, which is also known as a watermark. For example, you may have a form on your site that allows a visitor to apply for a membership. While each field may have a title, it may need an explanation so that your visitor knows what exact information is being asked for.
Let's say your membership form has a field titled “Name.” If it's membership to an online forum, it could mean the person's real name or their screen name. Using the Form Notifier plugin, you can add an explanation in the input field that tells them which type of name you are asking for. When they click in the input field, the explanatory text will automatically disappear. You can also change the alignment, color, and style of the text in the input field to fit your needs.
Namely is a brand new plugin that helps to standardize the capitalized format of names that are entered into your forms' input fields. For some reason or another, there are people that love to type their names or other things like this: “JoHn SmItH.” You also have those people who love to type in all CAPS. These varying styles could get annoying, but the Namely plugin will help to put them all into a single format that makes sense.
Here are a couple of examples of how Namely works. If “john smith” is typed into a field, it will convert to John Smith. Similarly, if “JOHN SMITH” is typed in, it will also convert to “John Smith.” The plugin converts the input after it is submitted, instead of as the person types. This helps eliminate any problems on the user end in case they try to reformat their letters and keep getting rejected.
It may not have the most appealing or attractive name, but Dirty Forms is a fantastic jQuery plugin for forms that will potentially save your visitors a lot of headaches. Dirty Forms kicks in to prevent a user from losing data when editing forms. If the user already entered data into a form and attempts to leave the page, a modal popup box will appear to ask them if they really want to leave the page. Leaving the page will cause them to lose any changes they have made. They'll have the option to continue to leave the page or stop. The plugin is easy to use and offers a nice buffer from the loss of form data.
This plugin helps convert your select lists into autocomplete text inputs. By including autocomplete functionality into a search box, for example, visitors can jump to what they are looking for without having to type out entire words. Such functionality can come into play if a user does not know how to spell an entire word, or if they are looking for suggestions of similar results in an on the fly manner.