jQuery Ideal Forms for Responsivity and form Validation


jQuery Ideal Forms is a small framework to build awesome responsive forms. It's built on top of jQuery and LESS.


  • Fully responsive. (aka adaptive, adapts to the container, no css media queries needed)
  • Keyboard support.
  • Customizable input types with LESS, the dynamic css language.
  • "On the spot" validation.
  • Placeholder support for every browser.

jQuery Ideal Forms for Responsivity and form Validation

The adaptive approach is the key to responsiveness everywhere, compatible with every browser, and works with any grid system.

To customize it open jq-idealforms.less and fiddle with the "user config". Then compile into css and load it inside your project. Quick & easy.

How to use it:

Load the latest jQuery library, the js/min/jquery.idealforms.min.js plugin and the css/jquery.idealforms.css stylesheet into your project.


For Ideal Forms to work its magic create your markup using the following template as a reference, nothing fancy, just the usual form tags wrapped in a div. Drop the form into a container of any size and Ideal Forms will do the rest.

<form id="my-form">

    <!-- Text -->
    <div><label>Username:</label><input name="username" type="text" /></div>
    <div><label>Date:</label><input name="date" type="text" placeholder="mm/dd/yy"/></div>
    <div><label>Comments:</label><textarea name="comments"></textarea></div>

    <!-- Select -->
        <select name="colors">
            <option value="Choose a color">Choose a color</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>

    <!-- Checkbox -->
        <label><input type="checkbox" name="langs&#91;&#93;" value="English"/>English</label>
        <label><input type="checkbox" name="langs&#91;&#93;" value="Chinese"/>Chinese</label>
        <label><input type="checkbox" name="langs&#91;&#93;" value="Spanish"/>Spanish</label>

    <!-- Radio -->
        <label><input type="radio" name="options" value="One"/>One</label>
        <label><input type="radio" name="options" value="Two"/>Two</label>
        <label><input type="radio" name="options" value="Three"/>Three</label>

    <!-- Buttons -->
    <!-- Empty label to align with all the other inputs -->
    <div><label>&nbsp;</label><input type="button" value="Button"/></div>


Invoke the plugin
Call Ideal Forms on each form separately.

$('#my-form').idealforms({ options });

View Ideal Forms Demo and Download it



Please enter your comment!
Please enter your name here