25 jQuery Tutorials for Creating and Working with Forms

by Steven Snell

February 21, 2010 in Tutorials

A few weeks ago we published a collection of jQuery plugins for working with forms. While those plugins can be very useful, there may be times where you would rather learn how to code the solution yourself rather than simply using a plugin. There are a number of quality tutorials available for working with jQuery and forms, and in this post we will feature 25 of them.

jQuery Form Tutorials:

Creating a Slide-in jQuery Contact Form 3.jpg

Creating a Slide-in jQuery Contact Form

Ajax Forms with jQuery

Ajax Forms with jQuery

A Fancy AJAX Contact Form

A Fancy AJAX Contact Form

WordPress and jQuery Contact Form Without a Plugin

WordPress and jQuery Contact Form Without a Plugin

Perfect Signin Dropdown Box Like Twitter with jQuery

Perfect Signin Dropdown Box Like Twitter with jQuery

Creating a Digg-Style Sign Up Form

Creating a Digg-Style Sign Up Form

Build an Incredible Login Form with jQuery

Build an Incredible Login Form with jQuery

Submit a Form Without Page Refresh Using jQuery

Submit a Form Without Page Refresh Using jQuery

Using Form Labels as Text Field Values

Using Form Labels as Text Field Values

Build a Simple Password Strength Checker

Build a Simple Password Strength Checker

Create a Progress Bar with JavaScript

Create a Progress Bar with JavaScript

A Fancy Apple.com-Style Search Suggestion

A Fancy Apple.com-Style Search Suggestion

How to Add Auto Complete to Your Google Custom Search Engine

How to Add Auto Complete to Your Google Custom Search Engine

Improved Current Field Highlighting in Forms

Improved Current Field Highlighting in Forms

jQuery Tutorial: Selecting Multiple Select Form Elements on the Fly

jQuery Tutorial: Selecting Multiple=

Checking Username Availability with Ajax Using jQuery

Checking Username Availability with Ajax Using jQuery

Create a Dynamic Form Preview with jQuery

Create a Dynamic Form Preview with jQuery

Advanced Form Styling & Functionality

Advanced Form Styling & Functionality

Changing Form Input Styles on Focus with jQuery

hanging Form Input Styles on Focus with jQuery

Modal Confirmation Dialog on Form Submit

Modal Confirmation Dialog on Form Submit

PHP Contact Form with jQuery Validation

PHP Contact Form with jQuery Validation

Using jQuery to Validate Forms

Using jQuery to Validate Forms

Form Validation with jQuery from Scratch

Form Validation with jQuery from Scratch

Quick and Easy Form Validation Tutorial with jQuery

Quick and Easy Form Validation Tutorial with jQuery

Simple Image Button Rollovers with jQuery

Simple Image Button Rollovers with jQuery

For more resources please see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design.Connect with Stephen on google+

  • Bret Bouchard

    Feb 21st

    I have used a few plug ins for forms, but I had yet to find a validation plug in I was happy with till I found http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

    By far the easiet plug in I;ve worked with for forms.

  • Alex Flueras

    Feb 21st

    Great post, I was actually looking for something like this. I have also found a nice post on styling your forms with jQuery: checkboxes, dropdown menus … etc – http://pixelmatrixdesign.com/uniform/

  • Michael Pehl

    Feb 22nd

    Check out http://blog.computer-service-mallorca.com/2010/02/09/jquery-form-wizard-with-inline-validation-extended-version/ which is using
    jQuery Inline Validation 1.6.3 and the cool FormToWizard from Janko.

  • Oliver Cardiff

    Feb 22nd

    Great list of jQuery form tutorials. These will definitely come in handy when I get a chance to use jQuery on my websites. Thanks for sharing.

  • JC

    Feb 22nd

    Great post. I hate dealing with forms and there look to be some great tips that I will have to check out. THANKS!

  • Amberly | Web Designer

    Feb 22nd

    Apple Style Search Suggestion is awesome.. thanks for sharing it.

  • Jason Bartholme

    Feb 22nd

    Great post, Steven. I was just going to begin researching some different ways to implement jQuery with forms.

  • Monica

    Feb 22nd

    lifesaver! do i need to say more? thanks for putting this together! jq here i come.

  • Slobodan Kustrimovic

    Feb 23rd

    Thanks for mentioning my “Checking Username Availability with Ajax Using jQuery” tutorial. :)

  • ken

    Mar 18th

    thanks buddy! bookmarked :)

  • purse

    Aug 8th

    Thanks for this article !!

  • grinding mill

    Aug 11th

    jQuery Tutorial: Selecting Multiple Select Form Elements on the Fly—useful to me!

  • jhon

    Jan 10th

    great post, thanks for this, I am digging the net to this article.

    another great jQuery tutorials
    jQuery Duplicate Fields Form Submit with PHP

  • Matt

    Mar 28th

    Great round-up as always – thanks for posting. Will come in handy on upcoming projects.

  • rali madhusudhana chary

    Apr 1st

    very very nice and useful posts. keep it post.

  • Horizon T101

    Jun 19th

    Again, great post! Thanks for this tutorial, i was really looking for this!
    Chad

  • Leave a Comment

    Your email address will not be published. Required fields are marked *