40 Extremely Useful jQuery Form Plugins

40 Extremely Useful jQuery Form Plugins


40 Extremely Useful jQuery Form Plugins

Introduction

The primary objective of a web form is to collect user input. With different type of form elements such as textbox, radio button, checkbox we able to choose the most appropriate form elements to represent the input we expected from users. For example, we use radio button for the gender input, drop down list for country selection and so forth.

However, the evolution of javascript allow us to further enhance web form. We can add extra functionality such as autocomplete, validation, usability and modification of default form interface. Most importanly, it reduces human errors by guiding and helping users to provide more accurate input.

Here is another series of web form jquery plugins, 40 jquery plugins that I believe will able to reduce your time searching for the right one.

Auto Complete

Auto-complete takes input from the user, and tries to form a list of words that match the users input. The function attaches itself to the input field selected, and also creates the UL drop down from within so all you need is have the styles for it ready.

  • Autocomplete | demo

    Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.
  • jQuery Auto Complete | demo

    This plugins adds an auto complete functionality to form fields, especially useful for searches.
  • jQuery Autocomplete | demo

    This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page.

Validation

Form Validator with several features such as grouping required fields or conditional checking if it is valid or not. Also you can validate string, numeric, date or e-mail. And you can combine several validations

Date

In filling a form. sometimes necessary Inputan date or time. here will be discussed on the plugin associated with the input date

  • Date Picker | demo

    Date Picker component with a lot of options and easy to fit in your web application.
  • Datepicker | demo

    Datepicker makes it easy to add calendars to date input fields in forms.

Tooltip

Tooltips are a “common graphical user interface element, that are used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over” (via Wikipedia)

  • jQuery (mb)Tooltip 1.6 | demo

    Now you can replace the ugly default tooltip with this smart and nice one!
  • qTip – The jQuery Tooltip Plugin | demo


    qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips
  • BeautyTips | demo

    BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page
  • vTip | demo

    vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work.
  • Coda Popup Bubbles | demo

    There's very little to the minimum required CSS. Of course, how you markup your bubble will change this, and the screencast uses the version from the Coda web site, so there’s a considerable amount of CSS to style the bubble.
  • jQuery Tooltip – Tooltips done right | demo

    This tool uses a simple and natural syntax and has an advanced programming API.You can extend it with callback methods or with your own plugins. This tool has a similar structure and feel as the other tools. Learn to use this tool and you will know how to use the rest.
  • Prototip 2 | demo

    Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.
  • jGrowl | demo

    jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works.
  • jTip | demo

    jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external.

Password

The following is a jquery plugin which is associated with a password. you as the developer can provide various alternatives to the user how to manage kepad password

Contact Form

Contact form is a form that can be used by our visitors to contact the owner of the website via email, with a jquery plugin. contact form become more interactive and attractive for visitors

  • jQuery Form Plugin | demo

    The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.
  • Contactable | demo

    Contactable will help you to make jQuery contact forms quickly and easily
  • jqTranform | demo

    jqTransform will make it easy to give your forms a more attractive look as compared to the default form.
  • jQuery Form Plugin | demo

    The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.

Text Field

Text fields are one line areas that allow the user to input text.If you want several lines you should use a text area instead. with Jquery, text field can make more easy for user

  • Input Fields with Images | demo

    This plugin allows you to add icons or images inside of input fields to add some flair to your forms.
  • In-Field Labels | demo

    The effect is achieved by overlaying the label element over the input, password, or textarea and making it semi-transparent when the field has focus. Once a keystroke is detected the label disappears entirely until the field loses focus. If it is empty on blur, then the label fades back in. Clicking on the label auto sets focus on the field.
  • Elastic | demo

    Elastic uses jQuery to allow textareas to expand according to the text that is entered.
  • Clearable Text Field | demo

    Clearable Text Field is a jQuery plugin which shows up a cross icon to clear value when user input something in a form field. It works like a find form of your browser: the clear button shows up when you enter any characters in it and disappears when you clear the form.

Radio Button

Radio Button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options.

File

Files needed to complete the charging information in the form, here will be a list of jquery plugins to manage file

  • Styling input file | demo

    Michael McGrady invented a very neat trick that allows us to (more or less) style file upload fields. The credits for the solution presented on this page are wholly his, Only added the position: relative, a few notes and tests, and ported it entirely to JavaScript.
  • Uploadify | demo

    Uploadify allows you to easily add one or more upload options.

Other useful plugins

Also, I have found some other plugins that are quite useful.

  • jQuery Autosave | demo

    This plugin will autosave the progress of form fields using cookies so nothing will be lost.
  • AJAX Fancy CAPTCHA jQuery Plugin | demo

    Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers
  • AutoTab | demo

    When a user has entered the maximum number of characters in a field (such as a phone number) it will auto tab to the next field.
  • ToggleVal | demo

    ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.
  • magicpreview | demo

    magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

9 comments

Jordan Moore
Tue, 2nd March 2010
Why is Prototip 2 in there? It's based on the Prototype framework, not jQuery. Reply
Lars Hoss
Wed, 3rd March 2010
Speaking about jQuery and forms I'd like to mention Uniform as well: http://pixelmatrixdesign.com/uniform/ Reply
Görsel
Thu, 4th March 2010
Thanks for sharing. Reply
Web Design Kent
Fri, 12th March 2010
Man! Look this form style plugin! It`s the most complete form style plugin! Works at IE 6 7 8, Safari (win and mac), firefox (win and mac), Opera, Chrome… Reply
web designers surrey
Wed, 17th March 2010
Great list of JQuery form plugins!

I'm trying to find a JQuery popup form CAPTCHA plugin? Have you or anyone else come across one?

Thanks Reply
MrsD
Sun, 27th November 2011
I second that! I've been looking for one as well... Reply
web design kent
Tue, 22nd June 2010
Nice list, would you mind me suggesting this bouncing notification box? Useful for hiding away cluttered forms at the top of the screen...

http://tutorialzine.com/2010/05/bounce-in-box-plugin-jquery/ Reply
lily
Wed, 30th June 2010
hello.. Is this type of comment box a plugin?.. newbie here.. can anyone tell me the name for the comment box plugin used in this site?.. thanks.. :) Reply
ajay
Mon, 3rd December 2012
Why is Prototip 2 in there? It's based on the Prototype framework, not jQuery Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement