Best jQuery Forms Plugins & Tutorials with Demo

    picEdit : jQuery front-end Image editor Plugin

    picEdit : jQuery front-end Image editor Plugin

    An attempt to create a simple front-end image editor jQuery plugin that would replace a file-upload input box in a HTML form.The plugin will turn your form’s <input type="file"... box into a tiny image editor/uploader. Perform basic image operations and preview your image before uploading to the server.

    FormBuilder : jQuery plugin for Building Forms

    FormBuilder : jQuery plugin for Building Forms

    A jQuery plugin for building forms, loading form structure from xml, and saving back to the server.

    Features:

    • JSON all the way around. No serliazing/format conversion.
    • More flexible field schema options for future expansion work
    • Form editor and form rendering use templates, making it easier to customize them
    • Better re-use of internal code, much cleaner code
    • Returns a basic API you can use for custom work
    • PHP/Mongo save/load example code is extremely lightweight, and easily replaced
    • Much improved support for multiple instances on a single page

    tagEditor : jQuery powerful Tag Editor plugin

    A powerful and lightweight tag editor plugin for jQuery.

    Features:

    • Edit in place tags
    • Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC
    • Optional jQuery UI sortable
    • Optional jQuery UI autocomplete
    • Copy-paste or delete multiple selected tags
    • Duplicate tags check
    • Custom delimiter/s
    • Placeholder
    • Custom style for faulty tags
    • Public methods for reading, adding and removing tags + destroy function
    • Callbacks
    • Graceful degradation if JavaScript is disabled

    Contactable : jQuery and PHP slide out Contact Form

    Contactable : jQuery and PHP slide out Contact Form

    Contactable is a jQuery plugin that enables users to incorporate a feature rich contact form into any website running PHP or Java.

    ikSelect : jQuery Plugin to Stylize Selects

    ikSelect : jQuery Plugin to Stylize Selects

    ikSelect is a jQuery Plugin to Stylize Selects.

    Features:

    • works in all popular browsers including IE6+
    • custom syntax support
    • works perfect as an inline-block
    • no z-index bugs in IE
    • optgroups support
    • great API
    • add/remove <option>’s and <optgroup>’s
    • disable/enable anything (select, optgoup, option)
    • optional filter text field
    • callbacks and event triggers
    • keyboard support

    Gridform : jQuery Plugin for Creating complex Forms

    Gridform : jQuery Plugin for Creating complex Forms

    jQuery-Plugin for creating complex forms (table-based) with usage of bootstrap and (optional) Font-Awesome.

    • Display a bunch of form elements in a (sometimes) complex grid
    • Have an “edit” and a “view” mode
    • Simple add validation or other event handler on form elements
    • Use the excellent bootstrap design and optional font awesome for “nicer” form ui
    • Have the ability to use elements spanning over some rows/cells of the grid (rowspan and colspan)

    jQuery Form Toolltip

    jQuery Form Toolltip

    This jQuery plugin allows you to add Tooltip calllout (with fadeIn fadeOut animation) to your form input controls.

    • You are able to specify the individual tooltip CSS
    • You are able to specify the fadeIn and fadeOut direction. Currently supporting Top, Bottom, Right and Left

    Wufoo style jQuery and HTML5 form builder

    Wufoo style jQuery and HTML5 form builder

    formbuilder is a Wufoo style jQuery and HTML5 form builder allows you to create user forms by dragging and dropping form elements.

    This form builder is using JSON to load existing form structures and serialising existing form structures back to JSON when the save button is clicked.

    Addressfield : jQuery Simple Dynamic Address field plugin

    Addressfield : jQuery Simple Dynamic Address field plugin

    The simple, configurable, dynamic address field plugin.This plugin enhances user experience on your address (shipping/PO) forms by dynamically…

    • Updating field labels (e.g. “ZIP code” vs. “Postcode”),
    • Adding or removing fields that are irrelevant (e.g. for a particular locales),
    • Converting fields between select lists and text fields (e.g. US States vs. counties in the UK),
    • Updating select options (e.g. US states vs. Canadian provinces)
    • Updating field order (e.g. city, state, zip for US, different elsewhere),
    • Validating fields on a field-by-field basis (e.g. between various postal code standards–depends on jQuery.validate),
    • Providing placeholder text for configured fields (helpful when validating above).

    Deep Checkbox : jQuery Plugin for Nested Checkboxes

    Deep Checkbox : jQuery Plugin for Nested Checkboxes

    Imagine multidimensional list with checkboxes. They are nested in LI-elements (by the way, nesting is necessary for this plugin work).

    Child-checkboxes are inherit parent’s property. Is possible to uncheck automatically checked items — that will exceptions. Also you can set element to display human-readable list of checked and excepted checkboxes there.