Warning: mkdir(): No such file or directory in /Volumes/WWW/buddigthoma.com/php/phpformbuilder/phpformbuilder/class/phpformbuilder/traits/Internal.php on line 224

Warning: mkdir(): No such file or directory in /Volumes/WWW/buddigthoma.com/php/phpformbuilder/phpformbuilder/class/phpformbuilder/traits/Internal.php on line 227

Warning: php_strip_whitespace(/Volumes/WWW/buddigthoma.com/phpformbuilder/plugins/frameworks/all-frameworks.min.css): Failed to open stream: No such file or directory in /Volumes/WWW/buddigthoma.com/php/phpformbuilder/phpformbuilder/class/phpformbuilder/traits/Internal.php on line 233

Warning: php_strip_whitespace(/Volumes/WWW/buddigthoma.com/phpformbuilder/plugins/frameworks/bootstrap5/bootstrap5.min.css): Failed to open stream: No such file or directory in /Volumes/WWW/buddigthoma.com/php/phpformbuilder/phpformbuilder/class/phpformbuilder/traits/Internal.php on line 233

Warning: file_put_contents(/Volumes/WWW/buddigthoma.com/phpformbuilder/plugins/min/css/bs5-my-form.min.css): Failed to open stream: No such file or directory in /Volumes/WWW/buddigthoma.com/php/phpformbuilder/phpformbuilder/class/phpformbuilder/traits/Internal.php on line 257

Code Samples
Examples of use with the source code and the resulting HTML

Frameworks

Included frameworks

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

Most examples are displayed using Bootstrap 5 layout.
The other frameworks (Bootstrap 4, Bulma, Foundation, Material Design, Tailwind, and uiKit) use the same markup.

The fourth argument defines the framework when you instantiate your form.

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

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

// Bulma
$form = new Form('form-name', 'horizontal', 'novalidate', 'bulma');

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

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

// Tailwind
$form = new Form('form-name', 'horizontal', 'novalidate', 'tailwind');

// uiKit
$form = new Form('form-name', 'horizontal', 'novalidate', 'uikit');

No framework

If your project is based on custom css or doesn't use any popular framework,
a minimal Bootstrap 5 CSS is provided in phpformbuilder/templates/assets/bootstrap5-phpfb/.

It includes only the strict minimum to build responsive forms.

Link this CSS file to your page and you can then create Bootstrap 5 forms without breaking anything from your design.

<head>
// link to the minimal Bootstrap 5 CSS
<link rel="stylesheet" href="/phpformbuilder/templates/assets/bootstrap5-phpfb/css/bootstrap5-phpfb.min.css">
</head>
<?php
// Then you can build your form
$form = new Form('my-form', 'horizontal', 'novalidate');

Customize for other frameworks

Each framework has its specific markup and CSS classes. For example, some frameworks 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.

The options property of the form defines all these specificities, including responsive rows & columns., including responsive rows & columns.

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

See details of options here: class-doc.php#options-overview

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

Layout

Horizontal forms

The horizontal forms display labels and fields 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="row">
    <label for="user-name" class="col-sm-3 col-form-label">User Name <sup class="text-danger">* </sup></label>
    <div class="col-sm-9 mb-3">
        <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="bs5-form-stacked-element mb-3">
    <label for="user-name" class="form-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 same line without containers.

To do this, create your form in horizontal mode and group your fields, or use input addons.

$form = new Form('my-form', 'horizontal', 'novalidate');
$form->setCols(-1, -1);
$form->addHeading('Elements grouped on the same line', 'h4');
$form->groupElements('user-firstname', 'user-name', 'submit-btn');
$form->addInput('text', 'user-firstname', '', '', 'placeholder=First name, required');
$form->addInput('text', 'user-name', '', '', 'placeholder=Name, required');
$form->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-primary');
$form->addHeading('Elements with addons', 'h4', 'class=mt-5');
$addonHtml = '<button class="btn btn-primary" type="submit">Submit</button>';
$form->addAddon('search-input', $addonHtml, 'after');
$form->addInput('text', 'search-input', '', '', 'placeholder=Search ..., required');

Elements grouped on the same line

Elements with addons

<h4>
    Elements grouped on the same line
</h4>
<div class="row">
    <div class="col-sm mb-3">
        <input id="user-firstname" name="user-firstname" type="text" value="" placeholder="First name" required class="form-control fv-group" aria-label="First name">
    </div>
    <div class="col-sm mb-3">
        <input id="user-name" name="user-name" type="text" value="" placeholder="Name" required class="form-control fv-group" aria-label="Name">
    </div>
    <div class="col-sm mb-3">
        <button type="submit" name="submit-btn" value="1" class="btn btn-primary">Submit</button>
    </div>
</div>
<h4 class="mt-5">
    Elements with addons
</h4>
<div class="row">
    <div class="col-sm mb-3">
        <div class="input-group has-addon-after">
            <input id="search-input" name="search-input" type="text" value="" placeholder="Search ..." required class="form-control" aria-label="Search ...">
            <button class="btn btn-primary input-group-btn phpfb-addon-after" type="submit">Submit</button>
        </div>
    </div>
</div>

Input groups

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

It 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->groupElements('user-name', 'user-first-name');

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

<div class="row">
    <label for="user-name" class="col-sm-2 col-form-label">Name <sup class="text-danger">* </sup></label>
    <div class="col-sm-4 mb-3">
        <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 mb-3">
        <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 startRow(), startCol(), endRow(), endCol() functions.

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

$form->startRow();
$form->startCol(6);

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

$form->endCol();
$form->startCol(6);

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

$form->endCol();
$form->endRow();

<div class="row">
    <div class="col-sm-6 mb-3">
        <div class="bs5-form-stacked-element mb-3">
            <label for="user-name" class="form-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="bs5-form-stacked-element mb-3">
            <label for="user-first-name" class="form-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-sm-6 mb-3">
        <div class="bs5-form-stacked-element mb-3">
            <label for="user-email" class="form-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="bs5-form-stacked-element mb-3">
            <label for="user-phone" class="form-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="row">
    <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 mb-3">
        <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="row">
    <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 mb-3">
        <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="bi bi-person-fill"></span>', 'before');
$form->addInput('text', 'user-name-3', '', 'User Name', 'placeholder=Your Name, required');

<div class="row">
    <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 mb-3">
        <div class="input-group has-addon-before">
            <div class="input-group-text"><span class="bi bi-person-fill phpfb-addon-before"></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 with button addon

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="row">
    <div class="col-sm-12 mb-3">
        <div class="input-group has-addon-before">
            <div class="input-group-text"><span class="bi bi-person-fill phpfb-addon-before"></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 a 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 Material templates

// See examples with code in Material templates

Several fields on the same line
(input groups)

Example 1

$form->setCols(0, 6);
$form->groupElements('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="row">
    <div class="col-sm-6 mb-3">
        <div class="input-group has-addon-before">
            <div class="input-group-text"><span class="bi bi-person-fill phpfb-addon-before"></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 mb-3">
        <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->groupElements('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="row">
        <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 mb-3">
            <input id="first-name-1" name="first-name-1" type="text" value="" aria-describedby="first-name-1-helper" required="required" class="form-control fv-group">
            <span class="form-text" id="first-name-1-helper">First name</span>
        </div>
        <div class="col-sm-4 mb-3">
            <input id="last-name-1" name="last-name-1" type="text" value="" aria-describedby="last-name-1-helper" required="required" class="form-control fv-group">
            <span class="form-text" id="last-name-1-helper">Last name</span>
        </div>
    </div>
</fieldset>

Textarea

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

<div class="row">
    <label for="special-request" class="col-sm-4 col-form-label">Any Special Request?</label>
    <div class="col-sm-8 mb-3">
        <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="row">
    <label for="prefix" class="col-sm-4 col-form-label">Full Name <sup class="text-danger">* </sup></label>
    <div class="col-sm-8 mb-3">
        <select id="prefix" name="prefix" required="required" class="form-select">
            <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="row">
    <label for="favourite-animal" class="col-sm-4 col-form-label">Favourite animal</label>
    <div class="col-sm-8 mb-3">
        <select id="favourite-animal" name="favourite-animal" class="form-select">
            <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="row">
    <label for="favourite-animal-2[]" class="col-sm-4 col-form-label">Favourite animal</label>
    <div class="col-sm-8 mb-3">
        <select id="favourite-animal-2[]" name="favourite-animal-2[]" multiple class="form-select">
            <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="row">
    <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 mb-3">
        <div class="form-check">
            <input type="radio" id="support-rating_0" name="support-rating" value="Excellent" required class="form-check-input">
            <label for="support-rating_0" class="form-label">Excellent</label>
        </div>
        <div class="form-check">
            <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-label">Good</label>
        </div>
        <div class="form-check">
            <input type="radio" id="support-rating_2" name="support-rating" value="Fair" required class="form-check-input">
            <label for="support-rating_2" class="form-label">Fair</label>
        </div>
        <div class="form-check">
            <input type="radio" id="support-rating_3" name="support-rating" value="Terrible" required class="form-check-input">
            <label for="support-rating_3" class="form-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="row">
    <label required="required" class="main-label main-label-inline col-sm-4 col-form-label">Please rate our support <sup class="text-danger">* </sup></label>
    <div class="col-sm-8 mb-3">
        <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="row">
    <label class="main-label main-label-inline col-sm-4 col-form-label">Favourite animal</label>
    <div class="col-sm-8 mb-3">
        <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="row">
    <label class="main-label col-sm-4 col-form-label">Favourite animal</label>
    <div class="col-sm-8 mb-3">
        <div class="form-check">
            <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-label">Dog</label>
        </div>
        <div class="form-check">
            <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-label">cat</label>
        </div>
        <div class="form-check">
            <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-label">duck</label>
        </div>
        <div class="form-check">
            <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-label">rabbit</label>
        </div>
    </div>
</div>

Button

Use $form->centerContent(); to center buttons or button groups

Example 1

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

<div class="row">
    <div class="col-sm-offset-4 col-sm-8 mb-3">
        <button type="submit" name="submit-btn" value="1" class="btn btn-success">Send <span class="bi bi-envelope append"></span></button>
    </div>
</div>

Example 2

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

<div class="row phpfb-centered">
    <div class="col-sm-12 mb-3">
        <button type="submit" name="submit-btn" value="1" class="btn btn-success">Send <span class="bi bi-envelope append"></span></button>
    </div>
</div>

Button group

Use $form->centerContent(); to center buttons or button groups

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

<div class="row">
    <div class="col-sm-offset-4 col-sm-8 mb-3">
        <div class="btn-group">
            <button type="submit" name="cancel-btn" value="0" class="btn btn-danger">Cancel <span class="bi bi-x-circle-fill append"></span></button>
            <button type="submit" name="submit-btn" value="1" class="btn btn-success">Send <span class="bi bi-envelope append"></span></button>
        </div>
    </div>
</div>

Helpers

Alerts

echo Form::buildAlert('This is a danger alert example', 'bs5', 'danger');

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>This is a danger alert example</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Headings

$form->addHeading('Please fill in the form below.', 'h3', 'class=text-center fw-light');

Please fill in the form below.

<h3 class="text-center fw-light">
    Please fill in the form below.
</h3>

Custom HTML

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

Please read this !

<div class="row">
    <label for="name-8" class="col-sm-4 col-form-label">Name</label>
    <div class="col-sm-8 mb-3">
        <input id="name-8" name="name-8" type="text" value="" aria-describedby="name-8-helper" class="form-control">
        <span class="form-text" id="name-8-helper">Enter your name</span>
    </div>
</div>
<p class="alert alert-warning"><span class="bi bi-exclamation-triangle-fill"></span> Please read this !</p>

Default Values

From database

<?php
// We use the "classicmodels" database as a MySQL sample database.
// Download the SQL at https://www.phpformbuilder.pro/documentation/phpformbuildersampledatabase.sql.zip
// Original source: https://www.mysqltutorial.org/mysql-sample-database.aspx

use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
use Migliori\PowerLitePdo\Db;

$root = rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR);

/* =============================================
    start session and include the autoloader
============================================= */

session_start();
include_once $root . '/phpformbuilder/autoload.php';

/* =============================================
    Database connection
============================================= */

$container = require_once $root . '/phpformbuilder/vendor/migliori/power-lite-pdo/src/bootstrap.php';
$db = $container->get(Db::class);

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

if ($_SERVER["REQUEST_METHOD"] == "POST" && Form::testToken('db-form') === true) {
    // create validator & auto-validate required fields
    $validator = Form::validate('db-form');

    // check for errors
    if ($validator->hasErrors()) {
        $_SESSION['errors']['db-form'] = $validator->getAllErrors();
    } else {
        // Update the record
        $update = [
            'productlines_id'  => $_POST['productlines_id'],
            'code'             => $_POST['code'],
            'name'             => $_POST['name'],
            'description'      => $_POST['description'],
            'stock'            => $_POST['stock'],
            'price'            => $_POST['price']
        ];
        $where = [
            'id' => $_POST['product_id']
        ];

        if (!$db->update('products', $update, $where)) {
            $msg = Form::buildAlert($db->error(), 'bs5', 'danger');
        } else {
            $msg = Form::buildAlert('Database updated successfully!', 'bs5', 'success');
        }
    }
}

/*=========================================================
  If no error is posted we get the values from the database
==========================================================*/

if (!isset($_SESSION['errors']['db-form']) || empty($_SESSION['errors']['db-form'])) {
    if (isset($_GET['product_id']) && is_numeric($_GET['product_id'])) {
        $productId = $_GET['product_id'];
    } else {
        // we set a random $productId for the demo
        $productId = rand(331, 440);
    }

    // we register the product_id to update the record later
    $_SESSION['db-form']['product_id'] = $productId;

    $row = $db->selectRow('products', 'productlines_id, products.code, products.name, products.description, products.stock, products.price', ['products.id' => $productId], false);

    // we register the record values to populate the form values
    $_SESSION['db-form']['productlines_id']  = $row->productlines_id;
    $_SESSION['db-form']['code']             = $row->code;
    $_SESSION['db-form']['name']             = $row->name;
    $_SESSION['db-form']['description']      = $row->description;
    $_SESSION['db-form']['stock']            = $row->stock;
    $_SESSION['db-form']['price']            = $row->price;
}

$form = new Form('db-form', 'horizontal', 'novalidate', 'bs5');
$form->setMode('development');

$form->addInput('hidden', 'product_id');
$form->startFieldset('Update Product', '', 'class=text-center mb-4');

// get the product lines to populate the select options
$columns = array('id', 'name');
$db->select('productlines', $columns);

// loop through the results
while ($row = $db->fetch()) {
    $form->addOption('productlines_id', $row->id, $row->name);
}
$form->addSelect('productlines_id', 'Product line', 'data-slimselect=true, required');

$form->addInput('text', 'code', '', 'Code', 'required');
$form->addInput('text', 'name', '', 'Name', 'required');
$form->addInput('text', 'description', '', 'Description', 'required');
$form->addInput('number', 'stock', '', 'Stock', 'required');
$form->addAddon('price', '&euro;', 'after');
$form->addInput('number', 'price', '', 'Price', 'required');
$form->setCols(0, 12);
$form->centerContent();
$form->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-primary mt-5, data-ladda-button=true, data-style=zoom-in', 'btn-group');
$form->endFieldset();

// See examples with code in templates

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', 'Preferred colors', 'multiple');
$form->render()

<form id="test-form" action="/php/phpformbuilder/documentation/code-samples.php" method="POST" novalidate class="form-horizontal bs5-form">
    <div>
        <input name="test-form-token" type="hidden" value="197599736667500a69213145.14936850" >
        <input name="test-form" type="hidden" value="true" >
    </div>
    <div class="row">
        <label class="main-label main-label-inline col-sm-4 col-form-label">Civility : </label>
        <div class="col-sm-8 mb-3">
            <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="row">
        <label for="user-name-9" class="col-sm-4 col-form-label">Name <sup class="text-danger">* </sup></label>
        <div class="col-sm-8 mb-3">
            <input id="user-name-9" name="user-name-9" type="text" value="Wilson" size="60" required class="form-control">
        </div>
    </div>
    <div class="row">
        <label for="preferred-colors" class="col-sm-4 col-form-label">Preferred colors</label>
        <div class="col-sm-8 mb-3">
            <select id="preferred-colors" name="preferred-colors" multiple class="form-select">
                <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

Misc