50 jQuery Form Plugins, Tutorials and Resources
A few weeks ago I posted how to clear a form with Javascript and in this post look at how to do the same thing but using jQuery, which makes the code required to do it much more condensed.
This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 32 languages.
3. PHP and jQuery: Submit a form without refreshing the page
Lately, I’ve been chancing on quite a number of posts at various places asking about how to perform a web action without the webpage reloading/refreshing? For example, dynamically updating a list on a page without a reload or submitting a form to PHP without leaving the webpage the form sits on.
4. jQuery form plugin and PHP file uploads
The past months I used the jQuery form plugin in several projects. Most forms were contact or feedback forms and some of them did a file upload as well. In a previous tutorial we explained how-to create a sign-up form for MailChimp. This sign-up form is a great example to use the jQuery form plugin as well.
5. Form validation with jQuery from scratch
In this article I’ll show you how to build a simple, yet powerful and extensible jQuery form validation plugin.
6. jVal – jQuery Form Field Validation Plugin
jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn’t impede form layout/design while being user-friendly. 
7. jQuery plugin : jqTransform
This plugin is a jQuery styling plugin wich allows you to skin form elements.
8. Build An Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it.
Fancy 非死book-like dynamic inputs with auto complete & pre added values. If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.
10. Niceforms
Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web.
11. jquery.combobox
jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
12. jQuery checkbox
Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.
13. jQuery UI: Radiobutton- und Checkbox-Replacement
14. jquery-asmselect
A progressive enhancement to select multiple form elements. It provides a simpler alternative with the following advantages: 
15. Ajax Username Check – Using JQuery!
The embedded javascript picks up the onblur event of the input field with id username.
16. Submit A Form Without Page Refresh using jQuery
In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let’s get started.
17. Live validation
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.
Today I am going to speak a little bit about a quick and easy way to make a jQuery AJAX Contact Form that employs a honeypot to foil pesky email bots. You can also check out the demo here to get an idea of how the end product will act. You can use the form anywhere you like, but a courtesy link somewhere is appreciated. It is released under the Creative Commons Attribution License. 
19. LightForm ::: Free Ajax/PHP Contact Form
LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.
20. Password Strength Indicator and Generator
Sometimes you want to show your user the strength of their password and although there a quite a few jQuery “plugins” that do this there are none – that I’ve found – that let you set the class of an element so that you can do a graphical representation of the strength.
21. Wufoo Style Jquery Form Focus Active State
So you like how Wufoo looks do you? Well you can make your form look just like their’s. I have a DEMO you can check out to test the functionality of what the hell I’m talking about in this tutorial. But I would much rather show you in code than ramble about something that doesn’t need much explaining. SO, here is the breakdown of this tutorial on how to focus a form field state with jQuery . GO! 
22. jTip
Try adjusting the browser window so the links in the paragraphs below are as close to the right side of the window as possible. Roll over a link in the paragraphs below. This demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don’t worry the script also accounts for the custom widths.
23. Collective: Multi-Step Signup Form With CSS3 and jQuery
In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.
24. A jQuery inline form validation, because validation is a mess
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. This is something I tried to remedy with this script. 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. There is no images needed.
25. jQuery Password Strength Meter
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.
27. Using form labels as text field values
When designing you sometimes have limited space to put and display all of the form elements. Recently that happened to me and when I was trying to squeeze in a simple newsletter form to a 120px wide area (plus a limited height). I realized that some of the elements will have to go. The obvious solution was to get rid of the labels and put only the form text fields. How will the users know what are the text fields for? I will use value attributes and write the explanation in there, something like “Input your email here”. Problem solved? Not quite. Why? Because I am a web standards freak 
Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong
29. Checkbox & Radio Input Replacement
This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = “crirHiddenJS”, an id, and a proper label tag.
30. Creating a Slide-in jQuery Contact Form
Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.
There are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.
This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore.
This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.
34. jQuery Keypad
A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span
35. Perfect signin dropdown box likes 推ter with jQuery
推ter’s running a new homepage with clean and easy design. Look at the top right of 推ter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with 推ter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!
Highlight increases usability by highlighting elements as you interact with the page.
37. AJAX FANCY CAPTCHA – JQUERY PLUGIN
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.
38. JavaScript custom dropdown – JavaScript image combobox
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. I hope you’ll like this.
39. Control the Look & Feel of Form Elements with Uniform jQuery Plugin
Uniform is jQuery plugin that could control the look and feel of form elements (checkboxes, drop down menus, radio buttons, file upload inputs and etc..) between all browsers. It works in sync with your real form elements to ensure accessibility and compatibility.
40. Create a dynamic form preview with jQuery
I recently had the need to build a dynamic form preview tool for work so clients could preview how the text and images would look before submitting the content to be published. I’ve trimmed down the code and removed the database part completely from this example so we can concentrate purely on the JavaScript.
41. Get and Set Form Element Values using jQuery
One of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you get and set values of form elements.
42. Validity: Unobtrusive jQuery Form Validation Plugin
jQuery.validity is an elegant and powerful jQuery plug-in you can use to setup client-side 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.
ZK5 now uses jQuery client side opening up a wide range of possibilities. One of the biggest benefit to use jQuery is that there are a lot of excellent plug-ins, in this Small Talk we will demonstrate the implementation of a client side effect using the jQuery plug-in jQuery Tools which provides a collection of the most important user-interface components for today’s websites.
44. Create a Ajax based Form Submission with jQuery
AJAX has changed the world of web development. Look at digg, 非死book and gmail, thery are good examples to show the capability of AJAX. AJAX can create a highly responsive web interface and increase the user experience.
45. jQuery Live Form Validation
After trying a load of non intuitive and not very useful jQuery form validation plugins I came up with this plugin. Its a jQuery plugin which helps create easy form validations with high flexibility and a large set of options.
46. Fancy Sliding Form with jQuery
Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
47. jQuery Tutorial: Selecting Multiple Select Form Elements on the Fly
A couple of weeks ago, a client of ours needed a simple way to select some or all options in a multiple select form element that contained hundreds of options. Basically, they had various State/County combination’s that they needed to assign to different pieces of content.
48. Comment Form Style With Jquery In WordPress
In this post I want to show you How you can change the style of your comment forms in WordPress making more great looking using JQuery.
49. Jquery Duplicate Fields Form Submit with PHP.
How to submit jquery duplicate/clone field values to form with PHP. It’s very basic level code, I had implemented this using relCopy.js jquery plugin to duplicating the existing field. I hope it’s useful for you. Thanks!
50. Animated Form Switching with jQuery
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
ajax 
umltool