Beautiful jQuery Plugin For Grid Based Dense Forms - Grid Forms

Grid Forms is a grid based jQuery form plugin designed for dense forms that require a large number of data to be entered regularly. Check the demo page to see how to create a personal bank account initial application with Grid Forms plugin.

Features:

• Proximity of fields relative to each other on the grid provides useful context. And field sizes serve as hints for what the value might be.
• With grid forms, lengthy forms can easily fit above the fold. Which means less scrolling. And tabbing through the form comes more naturally.
• Each field wraps to its own line on mobile devices. Even then, the forms are denser than their counterparts.

Basic Usage:

1. Include the jQuery javascript library on your web page/app.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include the gridforms.js script and default stylesheet after jQuery library.

<link rel="stylesheet" type="text/css" href="gridforms/gridforms.css">
<script type="text/javascript" src="gridforms/gridforms.js"></script>

3. Follow the Html structure below to build your grid based dense form.

<form class="my-grid-form">
<fieldset>
<legend>Form Section</legend>
<div data-row-span="2">
<div data-field-span="1">
<label>Field 1</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Field 2</label>
<input type="text">
</div>
</div>
</fieldset>
</form>

4. Style the form in CSS to your taste.

---

This awesome jQuery plugin is developed by kumailht. For more Advanced Usages, please check the demo page or visit the official website.