Hubeleke jQuery Form Builder Buy now (Only $9)

About Form Builder

Hubeleke jQuery Form Builder helps you to generate any type of html form with it's own grid system. You are able to add html form elements, titles and seperators as many as you want. You can easly align your form in a multi-column and/or multi-row format. You can also use many helpers like labels, placeholders, and tooltips to give information about inputs to the users.

After generating the form, you can see output of your form below the generator. It generates you the output view, html, css and javascript codes.

Form Information

In this section you can define the attributes of your <form> tag.

Field Data Type Description
Form Name String The name attribute of your form.
Form Id String The id attribute of your form.
Form Class String The class attribute of your form.
Form Action String The action attribute of your form.
Form Method String You can set your form post method (get/post) from this option.

Form Elements

GRID LAYOUT

Hubeleke jQuery Form Builder has it's own grid layout. It includes predefined classes for easy layout options. This grid layout has 16 grid per row. Here's how the grid system works:

Grid has a main wrapper with hb-form-grid class
<div class="hb-form-grid"></div>
To create horizontal column groups, you have to use hb-form-row class
<div class="hb-form-grid">
    <div class="hb-form-row">
	Columns here...
    </div>
</div>

Columns have width values from 1 to 16 with predefined classes. Ex: hb-form-col-1 hb-form-col-3 hb-form-col-7 hb-form-col-16
For a full-width column, you may use the hb-form-col-16 class.
<div class="hb-form-grid">
    <div class="hb-form-row">
	<div class="hb-form-col-16">A full-width column</div>
    </div>
</div>

<div class="hb-form-grid">
    <div class="hb-form-row">
	<div class="hb-form-col-8">A half-width column</div>
	<div class="hb-form-col-8">A half-width column</div>
    </div>
</div>

The grid system also has left and right margin classes for columns. Ex: hb-form-col-left-3 means 3 column margin from the left.
<div class="hb-form-grid">
    <div class="hb-form-row">
	<div class="hb-form-col-8 .hb-form-col-left-4 .hb-form-col-right-4">
	    A half-width column with 4 columns margin each left and right side
	</div>
    </div>
</div>

Creating a 3 columned layout in a 16 columned grid system is not possible. ( 16 % 3 != 0 )
This grid system has patch classes to make it possible: hb-form-col-left-half and hb-form-col-right-half
Ex: Margins outside: (1/2 + 5 + 5 + 5 + 1/2 = 16)
<div class="hb-form-grid">
    <div class="hb-form-row">
	<div class="hb-form-col-5 .hb-form-col-left-half">
	    1. of 3 columns
	</div>
	<div class="hb-form-col-5">
	    2. of 3 columns
	</div>
	<div class="hb-form-col-5 .hb-form-col-right-half">
	    3. of 3 columns
	</div>
    </div>
</div>

Ex: Margins inside: (5 + 1/2 + 5 + 1/2 + 5 = 16)
<div class="hb-form-grid">
    <div class="hb-form-row">
	<div class="hb-form-col-5 .hb-form-col-right-half">
	    1. of 3 columns
	</div>
	<div class="hb-form-col-5 .hb-form-col-right-half">
	    2. of 3 columns
	</div>
	<div class="hb-form-col-5">
	    3. of 3 columns
	</div>
    </div>
</div>


INPUT and TITLE TABS

Label Section

Field Data Type Description
Label String Label text for input.
Don't use Label Boolean You can enable/disable input label from this checkbox. If checked, current input will NOT use a label.
Label Width String Label column width.
Left Margin String Label column left margin width.
Right Margin String Label column right margin width.

Input Section (Basic Attributes)

Field Data Type Description
Type String You can select your type of input from here. Available types are:
text, password, textarea, select, radio, checkbox, submit, button, reset, file, hidden
Value String The value of your input. You can set a default value for your text etc. inputs
For multiple values for radio, checkbox and select inputs, write values in value=label format and comma separated. Ex: f=Female,m=Male
For a pre-selected value, use square brackets. Ex:f=Female,[m=Male]
Input Width String Input column width.
Left Margin String Input column left margin width.
Right Margin String Input column right margin width.

Input Section (Custom Attributes)

Field Data Type Description
Name String Name attribute for input.
Id String Id attribute for input.
Class String Class attribute for input.
Placeholder String Placeholder attribute for input. Recommended for disabled label usage.
Tooltip String This field's value will be shown as a tooltip on your input on mouseover or focus.
Maxlength Number Maxlength attribute for input.
Rows Number Rows attribute for textarea input.
Disabled Boolean Disabled attribute for input. If checked, input will be disabled.
Readonly Boolean Readonly attribute for input. If checked, input will be readonly.
Field Data Type Description
Text String The text of your title.
Type String The heading type of your title. Available types are:
h1, h2, h3, h4, h5, h6
Class String The class attribute of your title.
Title Width String Title column width.
Left Margin String Title column left margin width.
Right Margin String Title column left margin width.
Separator Line Boolean This option creates a seperator line for your form. If checked, a <hr> tag will be generated instead of a title.

HOW TO ORDER INPUT and TITLE TABS

Input and title tabs are all draggable. You can order tabs by dragging them.

BUTTONS

Button Role
Add Form Element Adds a new input tab to your form build area.
Add Form Title Adds a new title tab to your form build area
Remove Input/Title Removes current input/title tab.
Generate Form Generates the outout layout, html, css and javascript codes for the builded form.
Predefined Button Classes hb-button-green, hb-button-blue, hb-button-red, hb-button-orange, hb-button-black

Result

The generated form outout will be displayed here. You can preview your form layout here before using it.

This is a generated demo form output with all form and title elements.

Demo Form

Text Input
Type text value
Password Input
Type password value
Textarea
Type textarea value

Select
Select an option
Radio Input
Select a radio option
Checkbox Input
Select checkbox options
File Input
Select a file
Reset button with hb-button-black class
Custom button with hb-button-blue class
Submit button with hb-button-green class
The generated form's html codes will be displayed here.

These are the html codes of generated demo form:

<form action="documentation.html" method="post" id="demoForm" name="demo-form" class="demo-form-class">

<div class="hb-form-grid">
    <div class="hb-form-row">
        <div class="hb-form-col-16 hb-form-col-left-0 hb-form-col-right-0">
            <h3 class="hb-input-block ">Demo Form</h3>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Text Input</span>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-8">
            <div class="hb-tooltip">
                <input type="text" name="text-name" id="text-id" class="hb-input-block text-class" placeholder="Text here" maxlength="16">
                <span class="hb-tooltip-content">Type text value</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Password Input</span>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-8">
            <div class="hb-tooltip">
                <input type="password" name="password-name" id="password-id" class="hb-input-block password-class" placeholder="Password here" maxlength="16">
                <span class="hb-tooltip-content">Type password value</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Textarea</span>
        </div>
        <div class="hb-form-col-12 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <textarea name="textarea-name" id="textarea-id" class="hb-input-block textarea-class" placeholder="Text here" maxlength="128" rows="4"></textarea>
                <span class="hb-tooltip-content">Type textarea value</span>
            </div>
        </div>
        <div class="hb-form-col-16 hb-form-col-left-0 hb-form-col-right-0">
            <hr class="hb-hr">
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Select</span>
        </div>
        <div class="hb-form-col-6 hb-form-col-left-0 hb-form-col-right-6">
            <div class="hb-tooltip">
                <select name="select-name" id="select-id" class="hb-input-block select-class">
                    <option value="opt1">Option1</option>
                    <option value="opt2">Option2</option>
                    <option value="opt3">Option3</option>
                    <option value="opt4">Option4</option>
                </select>
                <span class="hb-tooltip-content">Select an option</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Radio Input</span>
        </div>
        <div class="hb-form-col-12 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <label class="hb-label">
                    <input type="radio" name="radio-name" id="radio-id" class="radio-class" value="r1" checked="">Radio 1
                </label>
                <label class="hb-label">
                    <input type="radio" name="radio-name" id="radio-id" class="radio-class" value="r2">Radio 2
                </label>
                <label class="hb-label">
                    <input type="radio" name="radio-name" id="radio-id" class="radio-class" value="r3">Radio 3
                </label>
                <label class="hb-label">
                    <input type="radio" name="radio-name" id="radio-id" class="radio-class" value="r4">Radio 4
                </label>
                <label class="hb-label">
                    <input type="radio" name="radio-name" id="radio-id" class="radio-class" value="r5">Radio 5
                </label>
                <span class="hb-tooltip-content">Select a radio option</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">Checkbox Input</span>
        </div>
        <div class="hb-form-col-12 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <label class="hb-label">
                    <input type="checkbox" name="checkbox-name" id="checkbox-id" class="checkbox-class" value="c1">Checkbox 1
                </label>
                <label class="hb-label">
                    <input type="checkbox" name="checkbox-name" id="checkbox-id" class="checkbox-class" value="c2" checked="">Checkbox 2
                </label>
                <label class="hb-label">
                    <input type="checkbox" name="checkbox-name" id="checkbox-id" class="checkbox-class" value="c3">Checkbox 3
                </label>
                <label class="hb-label">
                    <input type="checkbox" name="checkbox-name" id="checkbox-id" class="checkbox-class" value="c4">Checkbox 4
                </label>
                <label class="hb-label">
                    <input type="checkbox" name="checkbox-name" id="checkbox-id" class="checkbox-class" value="c5" checked="">Checkbox 5
                </label>
                <span class="hb-tooltip-content">Select checkbox options</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <span class="hb-label hb-input-block">File Input</span>
        </div>
        <div class="hb-form-col-12 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <input type="file" name="file-name" id="file-id" class="hb-input-block file-class">
                <span class="hb-tooltip-content">Select a file</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-4 hb-form-col-right-0">
            <div class="hb-tooltip">
                <input type="reset" name="reset-name" id="reset-id" class="hb-input-block hb-button-black" value="This is a Reset Button">
                <span class="hb-tooltip-content">Reset button with hb-button-black class</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <input type="button" name="button-name" id="button-id" class="hb-input-block hb-button-blue" value="This is a Button">
                <span class="hb-tooltip-content">Custom button with hb-button-blue class</span>
            </div>
        </div>
        <div class="hb-form-col-4 hb-form-col-left-0 hb-form-col-right-0">
            <div class="hb-tooltip">
                <input type="submit" name="submit-name" id="submit-id" class="hb-input-block hb-button-green" value="This is a Submit Button">
                <span class="hb-tooltip-content">Submit button with hb-button-green class</span>
            </div>
        </div>
    </div>
</div>

</form>

The main css file's include code will be displayed here:
<link href="path/to/css/jquery.hb.forms.css" rel="stylesheet" />
This file includes main grid and input classes. Copy the code, and paste before your main css file. By this means, you can write css patches for predefined classes in your main css file to customize your form styles.

A on submit function will be generated here for your form. You can use it, if you want to add a validation or before submit function etc. for your form. This is a demo function for the generated demo form:

<script type="text/javascript">
$(function() {

    $("body").on("submit", "#demoForm", function() {
	// Your code here
    });

});
</script>