Enhance Forms Using jQuery: 30 Tutorials and Plugins

Advertisment

Forms are very important part of any website, whether it is sign up form,  log in form or comment form. These forms are source of interaction between your website and its users. For example if anyone is signing up on your website it will be his/her first experience working on your website and it is said “First Impression Is Last Impression”; if users see your sign up form very elegantly and creatively designed they will have good first impression about your website. Same in the case of all other forms; which play the important role in the success of your website. Today we have rounded up a bunch of jQuery Plugins, Tutorials and Resources which will aid and facilitate you in enhancing the beauty of the various forms present on your website.

1. Turn any web form into a powerful wizard with jQuery

In this tutorial you will learn to turn any web form into a wizard with the help for jQuery. You can turn one long and ugly-looking form into steps wise wizard. Each step can be semantically divided into field-sets. Each field-set would clearly describe each group of fields. It is a very lightweight script which works in all major browsers like Chrome, Firefox, Safari, opera and IE. If you are still confused about its functionality you can check this DEMO.

2. Justify elements using jQuery and CSS

If you have ever created a simple web form without using “Tables” then you should have faced the problem of alignment, the input box starts straight after the heading making the form ugly. Using this script you can justify elements.

3. JavaScript image combo box

If you are sick and tired of you outdated drop down then this script will let you add extra beauty and grace in it. Using this script you can add an icon with each option, adding more interaction and elegance in drop downs.

4. Perfect sign in drop down box likes Twitter with jQuery

5. jQuery plugin: Password Validation

This jQuery plugin will validate the password which the user has desired about. This plugin provides two components, one is the rating of passwords, like if user is entering very simple password it will be rated as WEAK, if user have entered a combination of mixed characters then it will be rated as STRONG. Second functionality is about confirming whether both passwords entered are matching or not.

6. A jQuery inline form validation, because validation is a mess:

This script will help you to validate the inline form easily. When an error occur it create a DIV and position it in the top right corner of the input field. There are no images needed because the rounded corners and shadows are done with CSS3 and degrade well in resistant browsers.

7. jQuery Comment Preview

Previewing before submission is an awesome way to let user know whether he/she is entering correct information or not. This script uses jQuery to preview the comment which user is submitting. You can implement this tutorial in forms too, which will facilitate the users in finding their mistakes and correcting them. Here is a live DEMO, demonstrating how it works.

8. Create A Fancy AJAX Contact Form

9. jQuery “Highlight” plugin

jQuery “Highlight” plugin increases usability of any form by highlighting the elements as you interacts with the it. This plugin highlights the field on the form in which you are typing making it more elegant and visible. It can be used in tables and lists also. Here is a live DEMO which will clarify its functions.

10. Autohelp

This is a very simple a helpful jQuery plugin. It is developed looking at the importance of telling user what is the expected from him to fill in the specific field. This plugin becomes very handy when user has to fill a complicated form. For example if user is typing in the “Name” field this plugin will display help in a separate DOM element that “Enter your name”.

11. NiceForms

NiceForms is a script enables you to replace the most commonly used and boring form elements with custom designed elements. It contains a default theme that can be used or you can also develop you own theme if you want to be more unique.

12. prettyCheckboxes

Every form contains simple and outdated HTML checkboxes. This plugin will replace these checkboxes with new and graceful checkboxes and help you to add extra beauty to your form. It can support popular browsers including Firefox, IE, Opera and Safari.

13. Create an AJAX/jQuery/PHP Contact Form

14. Modalpreview

This is a lightweight jQuery script that previews the content of textarea in a pop-up window before the submission of the forms or comments. It is very useful in blog comments to avoid page loads. You will have to add your own CSS files to add styles in this ModalPreview Script.

15. prettyComments

Most of comment forms are very small in size for long comment. This jQuery plugin will make the comment box to stretch with respect to the length of comment so that full comment is visible all the time, making reading and editing the whole comment easier before submitting.

16. boxy – Facebook-like dialog/overlay, with frills

17. Make image buttons a part of input fields

You would have noticed if you try to embed image buttons with the form fields it displays outside the fields. This script will enables you to make image buttons a part of input field. You can view this DEMO which will help you to understand the features of this script.

18. In-Field Labels jQuery Plugin

This small jQuery plugin is of great use. It turns formatted HTML forms into forms with in-field label support. When the field is focused or clicked, labels fade and they disappear as you start entering text in it. It works in IE6+, Safari, Chrome and Firefox 2+. It has one drawback; Auto-Complete can cause problems in hiding the labels. But you can use autocomplete=”off” on the input elements as a remedy.

19. jQuery Password Strength Meter

Strength meter is necessary for every sign-up form. This Password Strength Meter is developed using jQuery which provides a smart algorithm for detecting the strength of password. You can download this plugin from this LINK for free.

20. jQuery Keypad

jQuery Keypad is a very useful plugin which attaches a pop-up keyboard to a text field for entry using mouse. You can add inline keypad in a span or division. It provides more secure entry for sensitive fields like passwords. It works for both input fields and text areas; you can customize it as per your wish like show/hide animation or changing its styling.

21. Simple chained combobox plugin for jQuery

22. Uploadify

Uploadify is a multiple file upload plugin for jQuery, requires Flash and any backend development language, that allows you to upload single or multiple files on your website. Its basic execution is very simple that even non-coders can do with ease; it also has an array of options allow for full customization for advanced users.

23. Build an Incredible Login Form With jQuery

In this tutorial you will learn to create a splendid sliding Login Form using jQuery. It solves the problem of displaying surplus information on every page having very little space to hold all of it. For example; A Login Form. You will learn to make the content accessible on every page but keep it hidden until needed for example a top Login panel which will be disclosed when clicked using jQuery, HTML and CSS.

24. How to Enhance Forms using jQuery UI

Creating an attractive user interface (UI) is a dark dream for web developers as it is very time-consuming. To solve this problem we have jQuery UI which makes creating user interface much easier without wasting your precious time. In this tutorial you will learn to enhance a form using jQuery UI.

25. Autocomplete Plugin

Auto-completion is necessitated for fast form filling. This plugin enable users to quickly find and select some value, leveraging filtering and searching. This plugin can also be used to enter previous selected values for example to complete an address or for suggesting tags. When we type something in the field the plugin starts searching for matching entries and displays a list of corresponding values in a drop down menu from which we can select the desired value.

26. jQuery shift-checkbox plugin.

Using this jQuery plugin selecting checkboxes has become very easy. If you have to select multiple checkboxes and they are in the same row/column then you just have to press SHIFT, select starting checkbox and ending checkbox. All the checkboxes between them will be selected. Here is a DEMO if anything is not cleared yet.

27. Transcendent jQuery Date Range Selector + Short Cuts

28. jQuery plugin: Validation

This is another jQuery plugin for validation of forms. You can customize it with the values you require. For example if you want to set the minimum value of username as 5 digits, you can do it and if user enters username less than 5 digits it will notify that username should be at least 5 digits. Same in the case of password, email etc.

29. Ajax Fancy Captcha

30. jQuery plugin for counting and limiting characters for input and textarea fields

Often you need to limit textarea as well as text input field. You can limit input field box but this option is not available for textarea but using this plugin you can limit the number of characters that can be entered in the textarea.

That’s all for this post, if something is missing then feel free mention in the comments.