Best jQuery Forms Plugins & Tutorials with Demo

    International Telephone Input : jQuery Plugin

    October 26, 2013 | Forms, Plugins
    International Telephone Input : jQuery Plugin

    A jQuery plugin for entering international telephone numbers. It adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags.

    Features:

    • In the country dropdown you can navigate by typing, or using the up/down keys
    • Selecting a country from the dropdown updates the dial code of the entered number
    • Typing a different dial code automatically updates the displayed flag
    • Country names in the dropdown also include localised versions in brackets
    • Programatically select a country after initialisation (e.g. when the user is entering their address)
    Read More Demo

    Making HTML dropdowns not suck with CSS3 & JavaScript

    October 21, 2013 | CSS2 / CSS3.0, Forms
    Making HTML dropdowns not suck with CSS3 & JavaScript

    Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border.

    In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance.

    Read More Demo

    Animated Checkboxes and Radio Buttons with SVG

    October 17, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Forms, SVG Tutorial
    Animated Checkboxes and Radio Buttons with SVG

    By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

    Read More Demo

    Check File Size Before Form Submit with Html5 & jQuery

    October 17, 2013 | Forms, HTML5
    Check File Size Before Form Submit with Html5 & jQuery

    Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.

    But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.

    Read More Demo

    bootstrapValidator : jQuery plugin to validate form fields

    October 13, 2013 | Bootstrap, Forms
    bootstrapValidator : jQuery plugin to validate form fields

    A jQuery plugin to validate form fields. Use with Bootstrap 3.

    Read More Demo

    Bootstrap Combobox : jQuery twitter Bootstrap Combobox plugin

    October 8, 2013 | Bootstrap, Forms, Plugins
    Bootstrap Combobox : jQuery twitter Bootstrap Combobox plugin

    A combobox plugin that works with twitter bootstrap.We had need of a combobox at work and after looking around at the available options I was not happy with any of them. The project had all it’s styling based on Twitter’s Bootstrap, so building on that made sense.

    Read More Demo

    Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

    September 28, 2013 | Forms, Plugins
    Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

    jQuery plugin for styling checkboxes and radio-buttons.

    • Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization.
    • With skin support
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.).
    • Ion.CheckRadio freely distributed under terms of MIT licence.
    Read More Demo

    Gridforms : Data entry can be beautiful with jQuery & CSS

    September 26, 2013 | CSS2 / CSS3.0, Forms, Responsive
    Gridforms : Data entry can be beautiful

    Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.

    An effort to make beautiful forms for web applications that make data entry less painful. Grid forms is a front-end library (Just CSS at the moment) which handles the boiler plate necessary to build grid based forms.

    Read More Demo

    Formbuilder.js : Graphical Interface to build Webforms

    September 26, 2013 | Core Java Script, Drag & Drop, Forms, jSON
    Formbuilder.js : Graphical Interface to build Webforms

    Formbuilder is a graphical interface for letting users build their own webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

    As of right now, Formbuilder only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users’ responses is all up to you. I’m planning on releasing a Rails gem to handle this logic, but the ETA on that is pretty up in the air. If you’d like to help, feel free to reach out.

    Read More Demo

    jTumbler : jQuery Beautiful, Slider-Style Selection Boxes

    September 20, 2013 | Forms, Plugins, Premium
    jTumbler : jQuery Beautiful, Slider-Style Selection Boxes

    jTumbler transforms your boring, old radio buttons into beautiful, slider-style selection boxes.Simply supply a group of radio buttons and labels inside of a container (such as a DIV), call the jTumbler plugin on the container, and jTumbler takes care of the rest. You may also provide a callback function to perform an operation each time a jTumbler button is clicked. The jTumbler jQuery plugin is an excellent way to enhance the usability of your website and give your visitors an easy, user-friendly experience.

    Features:

    • Create Beautiful and Stylish Radio Buttons
    • Extremely Easy To Set Up and Use
    • Lightweight jQuery Plugin
    • Unobtrusive Script & Simple to Setup
    • Compatible with All Modern Browsers
    • Easy to Integrate with Popular CMS’s
    Read More Demo