Scroll page back to the top

Tutorials and plugins for dealing with web forms

There are many ways you can format your web forms. Some elements like for instance dropdown menus (select) aren't that easy to style without help of javascript. This comprehensive collection lists tutorials and plugins will help you to deal with your forms. It contains styling, validations, captcha, autofillers, uploads and many more.

jQuery checkbox v.1.3.0 Beta

Lightweight custom styled checkbox implementaion

Demo | Source page

jQuery checkbox v.1.3.0 Beta

jQuery inline form validation

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

Demo | Source page

jQuery inline form validation

jQuery 'highlight'

Highlight increases usability by highlighting elements as you interact with the page.

Demo | Source page

jquery highlight

AJAX Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

Demo | Source page

AJAX Fancy Captcha

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page.

Demo | Source page

AJAX Upload

Ajax Username Check

The embedded javascript picks up the onblur event of the input field with id username.

Demo | Source page

Ajax Username Check

Nodstrum AutoCompleter

AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL

Demo | Source page

Nodstrum AutoComplete

Autotab

jQuery auto-tabbing and filter plugin.

Demo | Source page

Autotab

Autocomplete plugin

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

Demo | Source page

Autocomplete plugin

Password Validation plugin

This plugin extends the jQuery validation plugin rating password.

Demo | Source page

Password Validation plugin

Incredible Login Form With jQuery

This plugin extends the jQuery validation plugin rating password.

Demo | Source page

Incredible Login Form With jQuery

Default Value

A simple Javascript-based user enhancement to your web forms.

Source page

Default Value

Digg Style Sign Up Form

A tutorial describing how to create 'Digg.com like' sign up form.

Demo | Source page

Digg Style Sign Up Form

Styling an input type - file

Of all form fields, the file upload field is by far the worst when it comes to styling.

Demo | Source page

Styling an input type file

Elastic

Make your textareas grow Facebook style jQuery plugin.

Demo | Source page

Elastic

Enlarge input fields on focus

Enlarge input fields on focus so that entire text could be visible during typing.

Source page

Enlarge input fields on focus

markitup

It allows you to turn any textarea into a markup editor.

Demo | Source page

markitup

FancyForm

FancyForm is a powerful checkbox replacement script.

Demo | Source page

FancyForm

File Style

Style those darn file inputs. With jQuery of course.

Demo | Source page

File Style

mcDropdown jQuery

Input forms multi drop down jQuery plugin.

Demo | Source page

mcDropdown jQuery

Improved Current Field Highlighting

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms.

Demo | Source page

Improved Current Field Highlighting

In-Field Labels

Labels fade when the field is focussed and disappear when text entry begins.

Demo | Source page

In-Field Labels

JQuery Geogoer VChecks

jQuery plugin for nice looking checkboxes.

Demo | Source page

JQuery Geogoer VChecks

jCryption

jCryption is a JavaScript HTML-Form encryption plugin.

Demo | Source page

jCryption

combobox v2.1

You can add an icon with each option. It works with your existing 'select' element.

Demo | Source page

combobox v2.1

jQuery AlphaNumeric

Did you ever have the need to prevent users from entering certain characters into your form?

Demo | Source page

jQuery AlphaNumeric

jQuery Comment Preview

jQuery Comment Preview…

Demo | Source page

jQuery Comment Preview

uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.

Demo | Source page

UPLOADIFY

jQuery Form Plugin

Easily and unobtrusively upgrade HTML forms to use AJAX.

Demo | Source page

jQuery Form Plugin

jQuery Nice Form

Custom styling for your forms.

Demo | Source page

jQuery Nice Form

jQuery shiftcheckbox plugin

To select a range of consequetive checkboxes with just two clicks.

Demo | Source page

jQuery shiftcheckbox plugin

Selecting Multiple Select Form Elements on the Fly

Selecting Multiple Select Form Elements on the Fly

Demo | Source page

Selecting Multiple Select Form Elements on the Fly

jQuery plugin: Validation

jQuery plugin: Validated your form.

Demo | Source page

jQuery plugin: Validation

jquery.combobox

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).

Demo | Source page

jquery.combobox

jQuery fieldtag plugin

Handles custom styling of your form.

Demo | Source page

fieldtag plugin

jTip plugin

Displays tips for input forms.

Demo | Source page

jTip plugin

Justify elements using jQuery and CSS

Allign your form not using tables.

Demo | Source page

Justify elements using jQuery and CSS

livevalidation

Allign your form not using tables.

Demo | Source page

livevalidation

meioMask - a jQuery mask plugin

Encoding is important if you are going to use the mask with special characters like áéã (rule '@', see below for more).

Demo | Source page

meioMask – a jQuery mask plugin

NiceForms V2

Custom style your forms.

Demo | Source page

NiceForms V2

jqTransform

Another custom style your forms.

Demo | Source page

jqTransform

jVal

jQuery Form Field Validation Plugin.

Demo | Source page

jVal

TextArea Resizer

Allows the user to extend the textarea element/area within the web page whenever they feel.

Demo | Source page

TextArea Resizer

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser.

Demo | Source page

prettyCheckboxes

prettyComments

Comment boxes that are alway too small for long comment.

Demo | Source page

prettyComments

Select Multiple Form Fields

Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple.

Demo | Source page

Select Multiple Form Fields

Sexy Combo jQuery plugin

Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes.

Demo | Source page

Sexy Combo jQuery plugin

chain combobox

Very simple chained selects plugin for jQuery.

Demo | Source page

chain combobox

Submit Without Page Refresh

Submit A Form Without Page Refresh using jQuery.

Demo | Source page

Submit Without Page Refresh

Password Strength Indicator

Sometimes you want to show your user the strength of their password.

Demo | Source page

Password Strength Indicator

CLEARFIELD

This plugin takes care of your input fields.

Demo | Source page

CLEARFIELD

Date Range Selector

Transcendent jQuery Date Range Selector + Short Cuts.

Demo | Source page

Date Range Selector

LightForm

Takes care of your form validation, spam check, alerts…

Demo | Source page

LightForm

 

Discussion ( comments)

  • Tom Gecko

    Tom Gecko on Sunday, 6th January 2013

    Hi Sebastian and thank you for those great tutorials and design tips.
    Can you please make some suggestions about a decent CMS for web designers, in your future articles ?
    At least one with less complex template language.
    Templating for Joomla or Drupal seamed like a nightmare for me a common mortal with a lot of work in photoshop, illustrator and after-effects, really basic php skills (and tight deadlines) mainly focused in css, motion design and raw graphics...

    Reply

 
 
 
Add a comment
Add Comment