Best jQuery Forms Plugins & Tutorials with Demo

    jQuery CoreUISelect : Easy to Stylize Select Element

    jQuery CoreUISelect : Easy to Stylize Select Element

    jQuery coreUISelect is a cross browser easy to stylize select element with jQuery and CSS. Requires jQuery 1.6 or higher

    Features:

    • Full customization
    • Automatic calculations
    • Optiongroup support
    • Keyboard support
    • Powerful callback functions
    • Compatible with mobile devices
    • Support jScrollPane plugin for customize default scrollbar

    Happy.js : Lightweight, extensible form validation jQuery plugin

    Happy.js : Lightweight, extensible form validation jQuery plugin

    Happy.js plugin is lightweight and supports few input validations by default (required, date, number, e-mail, min/max and phone number). But it can be extended so easily by adding few lines and the regex for the rule you want.

    jQuery.html5form : Form Validation & Ajax Submission Plugin

    jQuery.html5form : Form Validation & Ajax Submission Plugin

    HTML5 validates forms without additional JavaScript.Currently only latest versiones of Firefox, Safari & Google Chrome supports this functionality.This plugin gets the same result in all versions on Internet Explorer and Firefox 3.6.

    Just create your form according the HTML5 syntax and the script will execute itself.It does not require extra classes. The plugin gets all the information from the HTML source.Runs automatically when detects Internet Explorer, Opera or Mozilla Firefox.The form sends through an asynchronous Ajax request by default.The plugin automatically gets method and action attributes declared on the form.

    Creating a Contact Form in jQuery Mobile and PHP

    Creating a Contact Form in jQuery Mobile and PHP

    This is a step-by-step tutorial on how to create a contact form in jQuery Mobile. I have also included complete php source code that can be used as a web service to send emails from your server.

    Flickr-Style Dynamic Edit Fields with jQuery and CSS3

    Flickr-Style Dynamic Edit Fields with jQuery and CSS3

    The typical Flickr interface design includes a lot of Ajax panels which you can edit right from any settings page. Their website layout incorporates many web 2.0 trends as you move from account settings to photo settings and uploads. There are plenty of resources we could look at, and in this tutorial I’d like to focus on one specific entity.

    We can build a set of small dynamic photos with a title and description. Then using jQuery we can target whenever a user clicks on these fields to edit the content right from the page. It’s a beautiful technique for creating a sleek user experience with just a few blocks of code. I won’t be storing any of the content into a database, but tying into a backend PHP script would make that process easy enough to accomplish.

    Ideal Forms : Responsive Forms with Html5 & jQuery

    Ideal Forms : Responsive Forms with Html5 & jQuery

    The ultimate framework for building and validating responsive HTML5 forms.

    Features:

    • Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
    • Keyboard support.
    • Every input type can be customized including select, radio, checkbox and file.
    • Custom datepicker using jQuery UI (with fallback)
    • “On the spot” validation.
    • Localization
    • HTML5 placeholder for every browser.

    styleSelect : jQuery Custom looking selectbox

    styleSelect : jQuery Custom looking selectbox

    This jQuery plugin replaces the standart select element with a custom looking selectbox. Plugin has keyboard support.

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.

    • The script can be used as an HTML5 input range polyfill solution
    • Introduces a gradient filled “range bar” for quick visual feedback
    • iOS Touch screen friendly
    • Arrives with a new CSS3 skin that degrades gracefully in older browsers
    • A small network footprint – only two HTTP requests and a total size (minified and gzipped) of about 11k
    • Unobtrusive & namespace friendly
    • Conforms to the WAI-ARIA defined role of “slider”
    • Keyboard accessible
    • Mousewheel compatible
    • Responsive design friendly

    CLEditor : WYSIWYG HTML editor in jQuery

    CLEditor : WYSIWYG HTML editor in jQuery

    CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

    In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.

    CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.

    Slide Submit : A jQuery Plugin For Spam-less Forms

    Slide Submit : A jQuery Plugin For Spam-less Forms

    Slide Submit is a jQuery plugin which will convert almost any object into a form-submitting or form-enabling slider. Instead of pressing a button, users can slide the slider to submit the form. Or, if you build your form with all of the fields disabled, you can create a slider which behaves like a toggle switch to enable and disable the fields.