Filter Forms List

Toggle All Forms

Filter Elements List

Toggle All Elements

Forms Templates

Contact Form 1

Horizontal contact form with captcha

Demo

Contact Form 2

Vertical contact form with captcha

Demo

Contact Form 3

Contact form with rich text editor & dependant field

Demo

Search Form

Search Form with 2 Autocomplete - 2nd with ajax search

Demo

Car Rental Form

Step form with accordion & step validation

Demo

Customer Feedback Form

2 columns
Feedback Form
with multiselect

Demo

Customer Satisfaction Step Form

Ajax step form with sliding transitions

Demo

CV Submission Form

Horizontal form with rich text editor & file upload

Demo

Order Form

Order Form with Payment Method
& Country select

Demo

Reservation Form

Reservation Form date & time pickers, icon select list

Demo

Room Booking Form

Booking Form
Date Picker,
Rich Text Editor

Demo

Simple Step Form

Simple Step Form with step validation

Demo

Forms Elements

$form->addInput('text', 'user-name', '', 'Name', 'required=required');
input vertical form documentation
$form->addInput('text', 'user-name', '', 'Name ', 'required=required');
$options = array(
    'horizontalOffsetCol'  => '',
    'horizontalElementCol' => 'col-sm-12'
);
$form->setOptions($options);
$form->addInput('text', 'user-name', '', '', 'placeholder=Name, required=required');
input group documentation
$options = array(
    'horizontalLabelCol'   => 'col-sm-2',
    'horizontalOffsetCol'  => 'col-sm-2',
    'horizontalElementCol' => 'col-sm-4'
);
$form->setOptions($options);
$form->groupInputs('user-name', 'user-email');
$form->addInput('text', 'user-name', '', 'Name : ', 'required=required');
$form->addInput('email', 'user-email', '', 'Email : ', 'required=required');
input group input group with help blocks documentation
First name
Last name
$options = array(
        'horizontalLabelCol'       => '',
        'horizontalOffsetCol'      => '',
        'horizontalElementCol'     => 'col-sm-6',
);
$form->setOptions($options);
$form->addHtml('<label>Full name</label>');
$form->groupInputs('first-name', 'last-name');
$form->addHtml('<span class="help-block">First name</span>', 'first-name', 'after');
$form->addInput('text', 'first-name', '', '', 'required=required');
$form->addHtml('<span class="help-block">Last name</span>', 'last-name', 'after');
$form->addInput('text', 'last-name', '', '', 'required=required');
input group input & button grouped documentation
$form = new Form('form-elements');
$form->setOptions($options);
$form->addHtml('<div class="col-sm-12">');
$form->groupInputs('search-input', 'search-btn');
$form->addInputWrapper('<span class="input-group-btn"></span>', 'search-btn');
$form->addInput('text', 'search-input', '', '');
$form->addBtn('button', 'search-btn', 1, '<span class="glyphicon glyphicon-search"></span>', 'class=btn btn-success');
$form->addHtml('</div>');
input group addon documentation
$form->addInputWrapper('<div class="input-group"></div>', 'user-email');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>', 'user-email', 'before');
$form->addInput('email', 'user-email', '', '', 'required=required, placeholder=Email');
input group addon input group with icons documentation
$options = array(
        'horizontalLabelCol'       => '',
        'horizontalOffsetCol'      => '',
        'horizontalElementCol'     => 'col-xs-6',
);
$form->setOptions($options);
$form->groupInputs('user-name', 'user-first-name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-name', 'before');
$form->addInput('text', 'user-name', '', '', 'required=required, placeholder=Name');
$form->addInputWrapper('<div class="input-group"></div>', 'user-first-name');
$form->addHtml('<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>', 'user-first-name', 'before');
$form->addInput('text', 'user-first-name', '', '', 'required=required, placeholder=First Name');
textarea basic vertical textarea documentation
$form->addTextarea('message', '', 'Your message', $attr = 'cols=20,rows=5,required=required');
select basic select documentation
$form->addOption('favourite-animal', 'Dog', 'dog');
$form->addOption('favourite-animal', 'cat', 'Cat');
$form->addOption('favourite-animal', 'lion', 'Lion');
$form->addOption('favourite-animal', 'mouse', 'Mouse');
$form->addOption('favourite-animal', 'mammoth', 'Mammoth');
$form->addOption('favourite-animal', 'duck', 'Duck', '', 'selected=selected');
$form->addOption('favourite-animal', 'rabbit', 'Rabbit');
$form->addSelect('favourite-animal', 'Favourite animal');
select basic select with option groups documentation
$form->addOption('favourite-animal', 'Dog', 'dog', 'Pets');
$form->addOption('favourite-animal', 'cat', 'Cat', 'Pets');
$form->addOption('favourite-animal', 'rabbit', 'Rabbit', 'Pets', 'selected=selected');
$form->addOption('favourite-animal', 'lion', 'Lion', 'Wild');
$form->addOption('favourite-animal', 'mouse', 'Mouse', 'Others');
$form->addOption('favourite-animal', 'mammoth', 'Mammoth', 'Others');
$form->addOption('favourite-animal', 'duck', 'Duck', 'Others');
$form->addSelect('favourite-animal', 'Favourite animal');
select basic multiple select documentation
$form->addOption('favourite-animal[]', 'Dog', 'dog');
$form->addOption('favourite-animal[]', 'cat', 'Cat');
$form->addOption('favourite-animal[]', 'lion', 'Lion');
$form->addOption('favourite-animal[]', 'mouse', 'Mouse');
$form->addOption('favourite-animal[]', 'mammoth', 'Mammoth');
$form->addOption('favourite-animal[]', 'duck', 'Duck');
$form->addOption('favourite-animal[]', 'rabbit', 'Rabbit');
$form->addSelect('favourite-animal[]', 'Favourite animal', 'multiple=multiple');
$form->addHtml('<span class="help-block">(multiple choices)</span>', 'favourite-animal[]', 'after');
select country documentation
$form->addCountrySelect('country', 'Country');
select country country list with small flags documentation
$form->addCountrySelect('country', 'Country', '', array('flag_size' => 16));
radio basic vertical radio documentation
$form->addRadio('support-rating', 'Excellent', 'Excellent');
$form->addRadio('support-rating', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating', 'Fair', 'Fair');
$form->addRadio('support-rating', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating', 'Please rate our support', false, 'required=required');
radio basic inline radio documentation
$form->addRadio('support-rating', 'Excellent', 'Excellent');
$form->addRadio('support-rating', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating', 'Fair', 'Fair');
$form->addRadio('support-rating', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating', 'Please rate our support', true, 'required=required');
checkbox basic inline checkboxes documentation
$form->addCheckbox('favourite-animal', 'Dog', 'dog', 'dog');
$form->addCheckbox('favourite-animal', 'cat', 'Cat', 'Cat');
$form->addCheckbox('favourite-animal', 'duck', 'Duck', 'Duck');
$form->addCheckbox('favourite-animal', 'rabbit', 'Rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal', 'Favourite animal');
checkbox basic vertical checkboxes documentation
$form->addCheckbox('favourite-animal', 'Dog', 'dog', 'dog');
$form->addCheckbox('favourite-animal', 'cat', 'Cat', 'Cat');
$form->addCheckbox('favourite-animal', 'duck', 'Duck', 'Duck');
$form->addCheckbox('favourite-animal', 'rabbit', 'Rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal', 'Favourite animal', false);
button submit button with icon documentation
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success');
button group button group with icon documentation
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success', 'my-btn-group');
$form->addBtn('cancel', 'cancel-btn', 1, 'Cancel <span class="glyphicon glyphicon-remove-sign append"></span>', 'class=btn btn-danger', 'my-btn-group');
$form->printBtnGroup('my-btn-group');
custom html documentation
Enter your name

Please read this !

$form->addHtml('<span class="help-block">Enter your name</span>', 'name', 'after');
$form->addInput('text', 'name', '', 'Name');
$form->addHtml('<p class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign prepend"></span> Please read this !</p>');
file upload documentation
Browse ...

3 files max. Accepted File Types : .pdf, .doc[x], .xls[x], .txt
$fileUpload_config = array(
'xml'                 => 'default',
'uploader'            => 'defaultFileUpload.php',
'btn-text'            => 'Browse ...',
'max-number-of-files' => 3
);
$form->addHtml('<span class="help-block">3 files max. Accepted File Types : .pdf, .doc[x], .xls[x], .txt</span>', 'cv[]', 'after');
$form->addFileUpload('file', 'cv[]', '', 'Upload your CV <br>&amp; Other Testmonials <br>(e.g Certificates)', 'id=cvFileUpload', $fileUpload_config);
tinymce tinymce basic config documentation
$form->addPlugin('tinymce', '#tinymce-message', 'contact-config');
$form->addTextarea('message', '', 'Your message');
bootstrap select select with icons & dependant field documentation
$form->addOption('reservation-type', 'Dinner', 'Dinner', '', 'data-icon=fa fa-cutlery');
$form->addOption('reservation-type', 'Birthday/ Anniversary', 'Birthday/ Anniversary', '', 'data-icon=fa fa-birthday-cake');
$form->addOption('reservation-type', 'Nightlife', 'Nightlife', '', 'data-icon=fa fa-moon-o');
$form->addOption('reservation-type', 'Private', 'Private', '', 'data-icon=fa fa-user-secret');
$form->addOption('reservation-type', 'Wedding', 'Wedding', '', 'data-icon=fa fa-heart');
$form->addOption('reservation-type', 'Corporate', 'Corporate', '', 'data-icon=fa fa-briefcase');
$form->addOption('reservation-type', 'Other', 'Other', '', 'data-icon=fa fa-star');
$form->addSelect('reservation-type', 'Reservation Type', 'class=selectpicker show-tick');
$form->startDependantFields('reservation-type', 'Other');
$form->addInput('text', 'reservation-type-other', '', '', 'placeholder=Please tell more ...');
$form->endDependantFields();
bootstrap select select multiple with icons documentation
(multiple choices)
$form->addOption('product-choice[]', 'Computers', 'Computers', '', 'data-icon=glyphicon-hdd');
$form->addOption('product-choice[]', 'Games', 'Games', '', 'data-icon=glyphicon-send');
$form->addOption('product-choice[]', 'Books', 'Books', '', 'selected, data-icon=glyphicon-book');
$form->addOption('product-choice[]', 'Music', 'Music', '', 'selected, data-icon=glyphicon-headphones');
$form->addOption('product-choice[]', 'Photos', 'Photos', '', 'data-icon=glyphicon-picture');
$form->addOption('product-choice[]', 'Films', 'Films', '', 'data-icon=glyphicon-film');
$form->addHtml('<span class="help-block">(multiple choices)</span>', 'product-choice[]', 'after');
$form->addSelect('product-choice[]', 'What products are you interested in ?', 'class=selectpicker, required=required, multiple=multiple');
bootstrap select select styled with icons documentation
$form->addOption('reservation-type', 'Dinner', 'Dinner', '', 'data-icon=fa fa-cutlery');
$form->addOption('reservation-type', 'Birthday/ Anniversary', 'Birthday/ Anniversary', '', 'data-icon=fa fa-birthday-cake, selected=selected');
$form->addOption('reservation-type', 'Nightlife', 'Nightlife', '', 'data-icon=fa fa-moon-o');
$form->addOption('reservation-type', 'Private', 'Private', '', 'data-icon=fa fa-user-secret');
$form->addOption('reservation-type', 'Wedding', 'Wedding', '', 'data-icon=fa fa-heart');
$form->addOption('reservation-type', 'Corporate', 'Corporate', '', 'data-icon=fa fa-briefcase');
$form->addSelect('reservation-type', 'Reservation Type', 'data-style=btn-info,class=selectpicker show-tick');
icheck radio + iCheck plugin square blue documentation
$form->addRadio('support-rating', 'Excellent', 'Excellent');
$form->addRadio('support-rating', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating', 'Fair', 'Fair');
$form->addRadio('support-rating', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating', 'Please rate our support', true, 'required=required');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'blue'));
icheck checkbox + iCheck plugin square blue documentation
$form->addCheckbox('favourite-animal', 'Dog', 'dog', 'dog');
$form->addCheckbox('favourite-animal', 'cat', 'Cat', 'Cat');
$form->addCheckbox('favourite-animal', 'duck', 'Duck', 'Duck', 'checked=checked');
$form->addCheckbox('favourite-animal', 'rabbit', 'Rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal', 'Favourite animal');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'blue'));
icheck radio with iCheck plugin flat red documentation
$form->addRadio('support-rating', 'Excellent', 'Excellent');
$form->addRadio('support-rating', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating', 'Fair', 'Fair');
$form->addRadio('support-rating', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating', 'Please rate our support', true, 'required=required');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'flat', '%color%' => 'red'));
icheck checkbox + iCheck plugin flat red documentation
$form->addCheckbox('favourite-animal', 'Dog', 'dog', 'dog');
$form->addCheckbox('favourite-animal', 'cat', 'Cat', 'Cat');
$form->addCheckbox('favourite-animal', 'duck', 'Duck', 'Duck', 'checked=checked');
$form->addCheckbox('favourite-animal', 'rabbit', 'Rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal', 'Favourite animal');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'flat', '%color%' => 'red'));
colorpicker documentation
$form->addPlugin('colorpicker', '#pick-a-color', 'colored-input');
$form->addInput('text', 'pick-a-color', '#006673', 'Pick a color', '');
datepicker documentation
$form->addPlugin('datepicker', '#pick-a-date');
$form->addInput('text', 'pick-a-date', '06/09/2015', 'Pick a date', '');
datepicker date picker with custom format documentation
$form->addPlugin('datepicker', '#date-custom-format', 'Y-m-d');
$form->addInput('text', 'date-custom-format', '2015-06-09', 'Pick a date (Y-m-d)');
timepicker documentation
$form->addPlugin('timepicker', '#pick-a-time');
$form->addInput('text', 'pick-a-time', '6:30am', 'Pick a time');
captcha documentation
$form->addInput('text', 'captcha', '', 'Type the following characters :', 'size=15');
$form->addPlugin('captcha', '#captcha');
passfield password with default format documentation
password must contain lowercase letters and be 8 characters long
$form->addPlugin('passfield', '#user-password-1');
$form->addHtml('<span class="help-block">password must contain lowercase + uppercase letters + number + symbol and be 8 characters long</span>', 'user-password-1', 'after');
$form->addInput('password', 'user-password-1', '', 'password', 'required=required');
passfield password custom format documentation
password must contain lowercase + uppercase letters + number + symbol and be 8 characters long
$form->addPlugin('passfield', '#user-password-2', 'lower-upper-number-symbol-min8');
$form->addHtml('<span class="help-block">password must contain lowercase + uppercase letters + number + symbol and be 8 characters long</span>', 'user-password-2', 'after');
$form->addInput('password', 'user-password-2', '', 'password', 'required=required');
wordcharactercount word / char counter documentation
$form->addPlugin('word-character-count', '#message-max-100', 'default', array('%maxAuthorized%' => 100));
wordcharactercount word / char counter + tinyMce documentation
$form->addTextarea('tinymce-word-char-count', '', 'tinymce : ', 'cols=100, rows=20, class=tinyMce');
$form->addPlugin('tinymce', '#tinymce-word-char-count', 'word_char_count', array('%maxAuthorized%' => 200));