Code Samples

Frameworks

Included frameworks

This document gives you quick examples of different layouts and form elements.

Most examples are displayed using Bootstrap 4 layout.
The other frameworks (Bootstrap 3, Foundation, and Material Design) are using the same markup.

To change the framework you just have to change the framework argument when you instanciate your form.

// default Bootstrap 4 form
$form = new Form('form-name', 'horizontal', 'novalidate');

// Bootstrap 3 form
$form = new Form('form-name', 'horizontal', 'novalidate', 'bs3');

// Foundation form
$form = new Form('form-name', 'horizontal', 'novalidate', 'foundation');

// Material form
$form = new Form('form-name', 'horizontal', 'novalidate', 'material');

Customize for other frameworks

Each framework has its own markup and CSS classes. For example, some framework wrap radio buttons & checkboxes into their label, whereas others don't.

Bootstrap adds a CSS form-control class to the form elements, but other frameworks don't.

All these specificities are defined by the options property of the form, including responsive rows & columns.

The HTML code generated by PHP Form Builder can be easily customized to be used with any framework:
Semantic-UI, Pure, Skeleton, UIKit, Milligram, Susy, Bulma, Kube, ...

$custom_options = array(
    // options here
);
$form->setOptions($custom_options);

Layout

Horizontal forms

In horizontal forms, labels and fields are displayed in two responsive columns whose width you can define.

$form = new Form('my-form', 'horizontal', 'novalidate');

// 3 columns label, 9 columns field, breakpoint = small screens
$form->setCols(3, 9, 'sm');

$form->addInput('text', 'user-name', '', 'User Name', 'required');

<div class="form-group row justify-content-end">
	<label for="user-name" class="col-sm-3 col-form-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-9">
		<input id="user-name" name="user-name" type="text" value="" required class="form-control">
	</div>
</div>

Vertical forms

In vertical forms, labels are displayed above the fields. Vertical forms don't use columns.

$form = new Form('my-form', 'vertical', 'novalidate');
$form->addInput('text', 'user-name', '', 'User Name', 'required');

<div class="form-group">
	<label for="user-name" class="form-control-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<input id="user-name" name="user-name" type="text" value="" required class="form-control">
</div>

Inline forms

Inline forms display labels and fields on the line without containers.

$form = new Form('my-form', 'inline', 'novalidate');
$form->addInput('text', 'user-name', '', 'User Name', 'class=ml-3, required');

<div class="form-group">
	<label for="user-name" class="form-control-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<input id="user-name" name="user-name" type="text" value="" class="ml-3 form-control" required>
</div>

Input groups

Input groups allow you to group several fields in the same row.

This is only possible in horizontal forms, which are the only ones to use a responsive layout with columns and rows.

$form = new Form('my-form', 'horizontal', 'novalidate');

// 2 columns label, 4 columns field, breakpoint = small screens
$form->setCols(2, 4, 'sm');

$form->groupInputs('user-name', 'user-first-name');

$form->addInput('text', 'user-name', '', 'Name', 'required');
$form->addInput('text', 'user-first-name', '', 'First name');

<div class="form-group row justify-content-end">
	<label for="user-name" class="col-sm-2 col-form-label">
		Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-4">
		<input id="user-name" name="user-name" type="text" value="" required class="form-control fv-group">
	</div>
	<label for="user-first-name" class="col-sm-2 col-form-label">
		First name
	</label>
	<div class="col-sm-4">
		<input id="user-first-name" name="user-first-name" type="text" value=""  class="form-control fv-group">
	</div>
</div>

Columns

To create a 2-column form, insert the html code in the appropriate places using the addHtml() function.

$form = new Form('my-form', 'vertical', 'novalidate');

$form->addHtml('<div class="row">');
$form->addHtml('<div class="col-6">');

$form->addInput('text', 'user-name', '', 'Name', 'required');
$form->addInput('text', 'user-first-name', '', 'First Name', 'required');

$form->addHtml('</div>');
$form->addHtml('<div class="col-6">');

$form->addInput('email', 'user-email', '', 'Email', 'required');
$form->addInput('tel', 'user-phone', '', 'Phone', 'required');

$form->addHtml('</div>');
$form->addHtml('</div>');

<div class="row">
	<div class="col-6">
		<div class="form-group">
			<label for="user-name" class="form-control-label">
				Name <sup class="text-danger">* </sup>
			</label>
			<input id="user-name" name="user-name" type="text" value="" required class="form-control">
		</div>
		<div class="form-group">
			<label for="user-first-name" class="form-control-label">
				First Name <sup class="text-danger">* </sup>
			</label>
			<input id="user-first-name" name="user-first-name" type="text" value="" required class="form-control">
		</div>
	</div>
	<div class="col-6">
		<div class="form-group">
			<label for="user-email" class="form-control-label">
				Email <sup class="text-danger">* </sup>
			</label>
			<input id="user-email" name="user-email" type="email" value="" required class="form-control">
		</div>
		<div class="form-group">
			<label for="user-phone" class="form-control-label">
				Phone <sup class="text-danger">* </sup>
			</label>
			<input id="user-phone" name="user-phone" type="tel" value="" required class="form-control">
		</div>
	</div>
</div>

Elements

Input with label

$form->addInput('text', 'user-name-1', 'value', 'User Name', 'required');

<div class="form-group row justify-content-end">
	<label for="user-name-1" class="col-sm-4 col-form-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="user-name-1" name="user-name-1" type="text" value="value" required class="form-control">
	</div>
</div>

Input with placeholder

$form->addInput('text', 'user-name-2', '', 'User Name', 'placeholder=Your Name, required');

<div class="form-group row justify-content-end">
	<label for="user-name-2" class="col-sm-4 col-form-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="user-name-2" name="user-name-2" type="text" value="" placeholder="Your Name" required class="form-control">
	</div>
</div>

Input with icon

$form->addIcon('user-name-3', '<span class="fa fa-user"></span>', 'before');
$form->addInput('text', 'user-name-3', '', 'User Name', 'placeholder=Your Name, required');

<div class="form-group row justify-content-end">
	<label for="user-name-3" class="col-sm-4 col-form-label">
		User Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text"><span class="fa fa-user"></span></span>
	</div>
	<input id="user-name-3" name="user-name-3" type="text" value="" placeholder="Your Name" required class="form-control">
</div>
</div>
</div>

Input without label

$form->setCols(0, 12);
$form->addIcon('user-name-4', '', 'before');
$form->addInput('text', 'user-name-4', '', '', 'placeholder=Your Name, required');

<div class="form-group row justify-content-end">
	<div class=" col-sm-12">
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text"><span class="fa fa-user"></span></span>
	</div>
	<input id="user-name-4" name="user-name-4" type="text" value="" placeholder="Your Name" required class="form-control" aria-label="Your Name">
</div>
</div>
</div>

Input with floating label (Material)

$form = new Form('my-form', 'horizontal', 'novalidate', 'material');
$form->setCols(0, 12);
$form->addInput('text', 'user-name-5', '', 'Your Name', 'required');

See examples with code in templates

// See examples with code in templates

Several fields on same line
(input groups)

Example 1

$form->setCols(0, 6);
$form->groupInputs('user-name-6', 'user-first-name-6');
$form->addIcon('user-name-6', '', 'before');
$form->addInput('text', 'user-name-6', '', '', 'required=required, placeholder=Name*');
$form->addInput('text', 'user-first-name-6', '', '', 'placeholder=First Name');

<div class="form-group row justify-content-end">
	<div class=" col-sm-6">
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text"><span class="fa fa-user"></span></span>
	</div>
	<input id="user-name-6" name="user-name-6" type="text" value="" required="required" placeholder="Name*" class="form-control fv-group" aria-label="Name*">
</div>
</div>
<div class=" col-sm-6">
	<input id="user-first-name-6" name="user-first-name-6" type="text" value="" placeholder="First Name" class="form-control fv-group" aria-label="First Name">
</div>
</div>

Example 2

$form->startFieldset('Please fill the form below');
$form->setCols(4, 4);
$form->groupInputs('first-name-1', 'last-name-1');
$form->addHelper('First name', 'first-name-1');
$form->addInput('text', 'first-name-1', '', 'Full Name : ', 'required=required');
$form->setCols(0, 4);
$form->addHelper('Last name', 'last-name-1');
$form->addInput('text', 'last-name-1', '', '', 'required=required');
$form->endFieldset();
Please fill the form below
First name
Last name

<fieldset>
	<legend>
		Please fill the form below
	</legend>
	<div class="form-group row justify-content-end">
		<label for="first-name-1" class="col-sm-4 col-form-label">
			Full Name :  <sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-4">
			<input id="first-name-1" name="first-name-1" type="text" value="" required="required" class="form-control fv-group">
			<small class="form-text text-muted">First name</small>
		</div>
		<div class=" col-sm-4">
			<input id="last-name-1" name="last-name-1" type="text" value="" required="required" class="form-control fv-group">
			<small class="form-text text-muted">Last name</small>
		</div>
	</div>
</fieldset>

Textarea

$form->addTextarea('special-request', '', 'Any Special Request?');

<div class="form-group row justify-content-end">
	<label for="special-request" class="col-sm-4 col-form-label">
		Any Special Request?
	</label>
	<div class="col-sm-8">
		<textarea id="special-request" name="special-request"  class="form-control"></textarea>
	</div>
</div>

Select

Example 1

$form->addOption('prefix', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('prefix', 'Mr', 'Mr');
$form->addOption('prefix', 'Mrs', 'Mrs');
$form->addSelect('prefix', 'Full Name', 'required=required');

<div class="form-group row justify-content-end">
	<label for="prefix" class="col-sm-4 col-form-label">
		Full Name <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<select id="prefix" name="prefix" required="required" class="form-control">
			<option value="" disabled selected>
				Choose one ...
			</option>
			<option value="Mr" >
				Mr
			</option>
			<option value="Mrs" >
				Mrs
			</option>
		</select>
	</div>
</div>

Example 2

$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');

<div class="form-group row justify-content-end">
	<label for="favourite-animal" class="col-sm-4 col-form-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<select id="favourite-animal" name="favourite-animal"  class="form-control">
			<option value="" disabled>
				Choose one ...
			</option>
			<optgroup label="Pets">
				<option value="Dog" >
					dog
				</option>
				<option value="cat" >
					Cat
				</option>
				<option value="rabbit" selected="selected">
					Rabbit
				</option>
			</optgroup>
			<optgroup label="Wild">
				<option value="lion" >
					Lion
				</option>
			</optgroup>
			<optgroup label="Others">
				<option value="mouse" >
					Mouse
				</option>
				<option value="mammoth" >
					Mammoth
				</option>
				<option value="duck" >
					Duck
				</option>
			</optgroup>
		</select>
	</div>
</div>

Example 3

$form->addOption('favourite-animal-2[]', 'Dog', 'dog');
$form->addOption('favourite-animal-2[]', 'cat', 'Cat');
$form->addOption('favourite-animal-2[]', 'lion', 'Lion');
$form->addOption('favourite-animal-2[]', 'mouse', 'Mouse');
$form->addOption('favourite-animal-2[]', 'mammoth', 'Mammoth');
$form->addOption('favourite-animal-2[]', 'duck', 'Duck');
$form->addOption('favourite-animal-2[]', 'rabbit', 'Rabbit');
$form->addSelect('favourite-animal-2[]', 'Favourite animal', 'multiple');
$form->addHelper('(multiple choices)', 'favourite-animal-2[]');

<div class="form-group row justify-content-end">
	<label for="favourite-animal-2" class="col-sm-4 col-form-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<select id="favourite-animal-2" name="favourite-animal-2[]" multiple class="form-control">
			<option value="Dog" >
				dog
			</option>
			<option value="cat" >
				Cat
			</option>
			<option value="lion" >
				Lion
			</option>
			<option value="mouse" >
				Mouse
			</option>
			<option value="mammoth" >
				Mammoth
			</option>
			<option value="duck" >
				Duck
			</option>
			<option value="rabbit" >
				Rabbit
			</option>
		</select>
	</div>
</div>

Radio

Example 1

$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');

<div class="form-group row justify-content-end">
	<label required="required" class="main-label col-sm-4 col-form-label">
		Please rate our support <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<div class="form-check justify-content-end">
			<input type="radio" id="support-rating_0" name="support-rating" value="Excellent" required  class="form-check-input">
			<label for="support-rating_0"  class="form-check-label">
				Excellent
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="radio" id="support-rating_1" name="support-rating" value="Good" required checked="checked" class="form-check-input">
			<label for="support-rating_1"  class="form-check-label">
				Good
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="radio" id="support-rating_2" name="support-rating" value="Fair" required  class="form-check-input">
			<label for="support-rating_2"  class="form-check-label">
				Fair
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="radio" id="support-rating_3" name="support-rating" value="Terrible" required  class="form-check-input">
			<label for="support-rating_3"  class="form-check-label">
				Terrible
			</label>
		</div>
	</div>
</div>

Example 2

$form->addRadio('support-rating-2', 'Excellent', 'Excellent');
$form->addRadio('support-rating-2', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating-2', 'Fair', 'Fair');
$form->addRadio('support-rating-2', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating-2', 'Please rate our support', true, 'required=required');

<div class="form-group row justify-content-end">
	<label required="required" class="main-label col-sm-4 col-form-label">
		Please rate our support <sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<div class="form-check form-check-inline">
			<input type="radio" id="support-rating-2_0" name="support-rating-2" value="Excellent" required  class="form-check-input">
			<label for="support-rating-2_0"  class="form-check-label">
				Excellent
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="radio" id="support-rating-2_1" name="support-rating-2" value="Good" required checked="checked" class="form-check-input">
			<label for="support-rating-2_1"  class="form-check-label">
				Good
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="radio" id="support-rating-2_2" name="support-rating-2" value="Fair" required  class="form-check-input">
			<label for="support-rating-2_2"  class="form-check-label">
				Fair
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="radio" id="support-rating-2_3" name="support-rating-2" value="Terrible" required  class="form-check-input">
			<label for="support-rating-2_3"  class="form-check-label">
				Terrible
			</label>
		</div>
	</div>
</div>

Checkbox

Example 1

$form->addCheckbox('favourite-animal-3', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-3', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-3', 'duck', 'Duck');
$form->addCheckbox('favourite-animal-3', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-3', 'Favourite animal');

<div class="form-group row justify-content-end">
	<label  class="main-label col-sm-4 col-form-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<div class="form-check form-check-inline">
			<input type="checkbox" id="favourite-animal-3_0" name="favourite-animal-3[]" value="dog"  class="form-check-input">
			<label for="favourite-animal-3_0" class="form-check-label">
				Dog
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="checkbox" id="favourite-animal-3_1" name="favourite-animal-3[]" value="Cat"  class="form-check-input">
			<label for="favourite-animal-3_1" class="form-check-label">
				cat
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="checkbox" id="favourite-animal-3_2" name="favourite-animal-3[]" value="Duck"  class="form-check-input">
			<label for="favourite-animal-3_2" class="form-check-label">
				duck
			</label>
		</div>
		<div class="form-check form-check-inline">
			<input type="checkbox" id="favourite-animal-3_3" name="favourite-animal-3[]" value="Rabbit"  class="form-check-input">
			<label for="favourite-animal-3_3" class="form-check-label">
				rabbit
			</label>
		</div>
	</div>
</div>

Example 2

$form->addCheckbox('favourite-animal-4', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-4', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-4', 'duck', 'Duck');
$form->addCheckbox('favourite-animal-4', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-4', 'Favourite animal', false);

<div class="form-group row justify-content-end">
	<label  class="main-label col-sm-4 col-form-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<div class="form-check justify-content-end">
			<input type="checkbox" id="favourite-animal-4_0" name="favourite-animal-4[]" value="dog"  class="form-check-input">
			<label for="favourite-animal-4_0" class="form-check-label">
				Dog
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="checkbox" id="favourite-animal-4_1" name="favourite-animal-4[]" value="Cat"  class="form-check-input">
			<label for="favourite-animal-4_1" class="form-check-label">
				cat
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="checkbox" id="favourite-animal-4_2" name="favourite-animal-4[]" value="Duck"  class="form-check-input">
			<label for="favourite-animal-4_2" class="form-check-label">
				duck
			</label>
		</div>
		<div class="form-check justify-content-end">
			<input type="checkbox" id="favourite-animal-4_3" name="favourite-animal-4[]" value="Rabbit"  class="form-check-input">
			<label for="favourite-animal-4_3" class="form-check-label">
				rabbit
			</label>
		</div>
	</div>
</div>

Button

Use $form->centerButtons(true); to center any button or button group

Example 1

$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="fa fa-envelope append"></span>', 'class=btn btn-success');

<div class="form-group row justify-content-end">
	<div class=" col-sm-8">
		<button type="submit" name="submit-btn" value="1" class="btn btn-success">
			Send <span class="fa fa-envelope append"></span>
		</button>
	</div>
</div>

Example 2

$form->setCols(0, 12);
$form->centerButtons(true);
$form->addBtn('submit', 'submit-btn', 1, 'Send ', 'class=btn btn-success');

<div class="form-group row text-center justify-content-end">
	<div class=" col-sm-12">
		<button type="submit" name="submit-btn" value="1" class="btn btn-success">
			Send <span class="fa fa-envelope append"></span>
		</button>
	</div>
</div>

Button group

$form->addBtn('submit', 'cancel-btn', 0, 'Cancel <span class="fa fa-ban append"></span>', 'class=btn btn-danger', 'my-btn-group');
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="fa fa-envelope append"></span>', 'class=btn btn-success', 'my-btn-group');
$form->printBtnGroup('my-btn-group');

<div class="form-group row justify-content-end">
	<div class=" col-sm-8">
		<div class="btn-group">
			<button type="submit" name="cancel-btn" value="0" class="btn btn-danger">
				Cancel <span class="fa fa-ban append"></span>
			</button>
			<button type="submit" name="submit-btn" value="1" class="btn btn-success">
				Send <span class="fa fa-envelope append"></span>
			</button>
		</div>
	</div>
</div>

Custom html

$form->addHelper('Enter your name', 'name-8');
$form->addInput('text', 'name-8', '', 'Name');
$form->addHtml('<p class="alert alert-warning"><span class="fa fa-exclamation-triangle"></span> Please read this !</p>');
Enter your name

Please read this !

<div class="form-group row justify-content-end">
	<label for="name-8" class="col-sm-4 col-form-label">
		Name
	</label>
	<div class="col-sm-8">
		<input id="name-8" name="name-8" type="text" value=""  class="form-control">
		<small class="form-text text-muted">Enter your name</small>
	</div>
</div>
<p class="alert alert-warning">
	<span class="fa fa-exclamation-triangle"></span>
	 Please read this !
</p>

Default Values

From database

<?php
use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
use phpformbuilder\database\Mysql;

/* =============================================
    start session and include form class
============================================= */

session_start();
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';

/* =============================================
    validation if posted
============================================= */

if ($_SERVER["REQUEST_METHOD"] == "POST" && Form::testToken('user-form') === true) {
    include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Validator.php';
    include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Exception.php';
    $validator = new Validator($_POST);
    $required = array('civility', 'user-name-8', 'user-first-name-8', 'user-email-8', 'validated');
    foreach ($required as $required) {
        $validator->required()->validate($required);
    }
    $validator->email()->validate('user-email-8');

    // check for errors

    if ($validator->hasErrors()) {
        $_SESSION['errors']['user-form'] = $validator->getAllErrors();
    } else {

        require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . 'phpformbuilder/database/db-connect.php';
        require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . 'phpformbuilder/database/Mysql.php';

        $db = new Mysql();
        $filter['user_id']         = Mysql::sqlValue($_POST['user_id'], Mysql::SQLVALUE_NUMBER);
        $update['civility']        = Mysql::SQLValue($_POST['civility']);
        $update['user-name-8']       = Mysql::SQLValue($_POST['user-name-8']);
        $update['user-first-name-8'] = Mysql::SQLValue($_POST['user-first-name-8']);
        $update['user-email-8']      = Mysql::SQLValue($_POST['user-email-8']);
        $update['validated']       = Mysql::SQLValue($_POST['validated']);
        /*      (disabled in demo - no database enabled)

                if (!$db->UpdateRows('users', $update, $filter)) {
                    $msg = '

' . $db->error() . '
' . $db->getLastSql() . '

' . " \n"; } else { $msg = '

Database updated successfully !

' . " \n"; } */ } } if(isset($_GET['user_id']) && is_numeric($_GET['user_id'])) { $user_id = $_GET['user_id']; } if (!isset($_SESSION['errors']['user-form']) || empty($_SESSION['errors']['user-form'])) { // If no error posted /* Retrieve values from db (disabled in demo - no database enabled) $db = new Mysql(); $columns = $db->getColumnNames("users"); $qry = "SELECT * FROM users WHERE user_id='$user_id'"; $db->query($qry); $row = $db->Row(); foreach ($columns as $columnName) { $_SESSION['user-form'][$columnName] = $row->$columnName; } */ // values for demo $user_id = 1; $_SESSION['user-form']['civility'] = 'Ms.'; $_SESSION['user-form']['user-name-8'] = 'Wilson'; $_SESSION['user-form']['user-first-name-8'] = 'Susan'; $_SESSION['user-form']['user-email-8'] = 'swilsone@squarespace.com'; $_SESSION['user-form']['validated'] = 1; } $form = new form('user-form'); $form->startFieldset('Update User'); $form->addInput('hidden', 'user_id', $user_id); $form->addRadio('civility', 'M.', 'M.'); $form->addRadio('civility', 'Mrs.', 'Mrs.'); $form->addRadio('civility', 'Ms.', 'Ms.'); $form->printRadioGroup('civility', 'Civility : '); $form->addInput('text', 'user-name-8', '', 'Name', 'size=60, required=required'); $form->addInput('text', 'user-first-name-8', '', 'First Name', 'size=60, required=required'); $form->addInput('user-email', 'user-email-8', '', 'user-email : ', 'size=60, required=required'); $form->addRadio('validated', 'Yes', 1); $form->addRadio('validated', 'No', 0); $form->printRadioGroup('validated', 'Validated'); $form->addBtn('button', 'cancel', 0, 'Cancel', 'class=btn btn-warning', 'btn-group'); $form->addBtn('submit', 'submit', 1, 'Submit ', 'class=btn btn-success', 'btn-group'); $form->printBtnGroup('btn-group'); $form->endFieldset(); ?>
Update User

<fieldset>
	<legend>
		Update User
	</legend>
	<div class="form-group row justify-content-end">
		<label  class="main-label col-sm-4 col-form-label">
			Civility : 
		</label>
		<div class="col-sm-8">
			<div class="form-check form-check-inline">
				<input type="radio" id="civility_0" name="civility" value="M."  class="form-check-input">
				<label for="civility_0"  class="form-check-label">
					M.
				</label>
			</div>
			<div class="form-check form-check-inline">
				<input type="radio" id="civility_1" name="civility" value="Mrs."  class="form-check-input">
				<label for="civility_1"  class="form-check-label">
					Mrs.
				</label>
			</div>
			<div class="form-check form-check-inline">
				<input type="radio" id="civility_2" name="civility" value="Ms." checked="checked"  class="form-check-input">
				<label for="civility_2"  class="form-check-label">
					Ms.
				</label>
			</div>
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label for="user-name-8" class="col-sm-4 col-form-label">
			Name <sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="user-name-8" name="user-name-8" type="text" value="Wilson" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label for="user-first-name-8" class="col-sm-4 col-form-label">
			First Name <sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="user-first-name-8" name="user-first-name-8" type="text" value="Susan" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label for="user-email-8" class="col-sm-4 col-form-label">
			email :  <sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="user-email-8" name="user-email-8" type="email" value="swilsone@squarespace.com" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label  class="main-label col-sm-4 col-form-label">
			Validated
		</label>
		<div class="col-sm-8">
			<div class="form-check form-check-inline">
				<input type="radio" id="validated_0" name="validated" value="1" checked="checked"  class="form-check-input">
				<label for="validated_0"  class="form-check-label">
					Yes
				</label>
			</div>
			<div class="form-check form-check-inline">
				<input type="radio" id="validated_1" name="validated" value="0"  class="form-check-input">
				<label for="validated_1"  class="form-check-label">
					No
				</label>
			</div>
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<div class=" col-sm-8">
			<div class="btn-group">
				<button type="button" name="cancel" value="0" class="btn btn-warning">
					<span class="fa fa-ban prepend"></span>
					Cancel
				</button>
				<button type="submit" name="submit" value="1" class="btn btn-success">
					Submit <span class="fa fa-check append"></span>
				</button>
			</div>
		</div>
	</div>
</fieldset>

From variables

// Default values from variables
if (!isset($_SESSION['errors']['test-form']) || empty($_SESSION['errors']['test-form'])) {

    // register default values
    $_SESSION['test-form']['civility-1']      = 'Ms.';
    $_SESSION['test-form']['user-name']       = 'Wilson';
    $_SESSION['test-form']['preferred-colors'] = array('blue', 'green');
}
$form = new Form('test-form', 'horizontal', 'novalidate');
$form->addRadio('civility-1', 'M.', 'M.');
$form->addRadio('civility-1', 'Mrs.', 'Mrs.');
$form->addRadio('civility-1', 'Ms.', 'Ms.');
$form->printRadioGroup('civility-1', 'Civility : ');
$form->addInput('text', 'user-name-9', '', 'Name', 'size=60, required');
$form->addOption('preferred-colors', 'red', 'red');
$form->addOption('preferred-colors', 'green', 'green');
$form->addOption('preferred-colors', 'yellow', 'yellow');
$form->addOption('preferred-colors', 'pink', 'pink');
$form->addOption('preferred-colors', 'blue', 'blue');
$form->addOption('preferred-colors', 'purple', 'purple');
$form->addOption('preferred-colors', 'black', 'black');
$form->addSelect('preferred-colors', 'Prefered colors', 'multiple');
$form->render()

<form id="test-form" action="/documentation/code-samples.php" method="POST" novalidate class="form-horizontal">
	<div>
		<input name="test-form-token" type="hidden" value="1597607966673ed9d26d4942.36731131" >
		<input name="test-form" type="hidden" value="1" >
	</div>
	<div class="form-group row justify-content-end">
		<label  class="main-label col-sm-4 col-form-label">
			Civility : 
		</label>
		<div class="col-sm-8">
			<div class="form-check form-check-inline">
				<input type="radio" id="civility-1_0" name="civility-1" value="M."  class="form-check-input">
				<label for="civility-1_0"  class="form-check-label">
					M.
				</label>
			</div>
			<div class="form-check form-check-inline">
				<input type="radio" id="civility-1_1" name="civility-1" value="Mrs."  class="form-check-input">
				<label for="civility-1_1"  class="form-check-label">
					Mrs.
				</label>
			</div>
			<div class="form-check form-check-inline">
				<input type="radio" id="civility-1_2" name="civility-1" value="Ms." checked="checked"  class="form-check-input">
				<label for="civility-1_2"  class="form-check-label">
					Ms.
				</label>
			</div>
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label for="user-name-9" class="col-sm-4 col-form-label">
			Name <sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="user-name-9" name="user-name-9" type="text" value="Wilson" size="60" required class="form-control">
		</div>
	</div>
	<div class="form-group row justify-content-end">
		<label for="preferred-colors" class="col-sm-4 col-form-label">
			Prefered colors
		</label>
		<div class="col-sm-8">
			<select id="preferred-colors" name="preferred-colors" multiple class="form-control">
				<option value="red" >
					red
				</option>
				<option value="green"  selected="selected">
					green
				</option>
				<option value="yellow" >
					yellow
				</option>
				<option value="pink" >
					pink
				</option>
				<option value="blue"  selected="selected">
					blue
				</option>
				<option value="purple" >
					purple
				</option>
				<option value="black" >
					black
				</option>
			</select>
		</div>
	</div>
</form>

Special forms


<div class="text-center">
    <a data-remodal-target="modal-target" class="btn btn-primary text-white btn-lg">Sign Up</a>
</div>
<?php
$form = new Form('my-form', 'horizontal', 'novalidate');
// add your fields here
$form->modal('#modal-target');
?>

See examples with code here:
jquery-plugins.php#modal-example
templates

// See examples with code in templates or plugins page

Popover form


<div class="text-center">
    <a href="#" id="popover-link" class="btn btn-primary text-white btn-lg">Sign Up</a>
</div>
<?php
$form = new Form('my-form', 'horizontal', 'novalidate');
// add your fields here
$form->popover('#popover-link');
?>

// See examples with code in templates or plugins page

Validation

Email sending

Database CRUD