This document gives you quick examples of different layouts and form elements.
Most examples are displayed using Bootstrap 4 layout.Bootstrap 3 Foundation Material Design
To change the framework you just have to change the framework argument when you instanciate your form.
';
$php_code['included-frameworks'][] = '// 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\');';
?>
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:
';
$php_code['customize-for-other-frameworks'][] = '$custom_options = array(
// options here
);
$form->setOptions($custom_options);';
// Horizontal forms
$content_text['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');
$php_code['horizontal-forms'][] = '$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\');';
$output['horizontal-forms'][] = '';
$output_code['horizontal-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
// Vertical forms
$content_text['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');
$php_code['vertical-forms'][] = '$form = new Form(\'my-form\', \'vertical\', \'novalidate\');
$form->addInput(\'text\', \'user-name\', \'\', \'User Name\', \'required\');';
$output['vertical-forms'][] = '';
$output_code['vertical-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
// Inline forms
$content_text['inline-forms'] = 'Inline forms display labels and fields on the line without containers.
';
$form = new Form('my-form', 'vertical', 'novalidate');
$form->addInput('text', 'user-name', '', 'User Name', 'class=ml-3, required');
$php_code['inline-forms'][] = '$form = new Form(\'my-form\', \'inline\', \'novalidate\');
$form->addInput(\'text\', \'user-name\', \'\', \'User Name\', \'class=ml-3, required\');';
$output['inline-forms'][] = '';
$output_code['inline-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
// Input groups
$content_text['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');
$php_code['input-groups'][] = '$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\');';
$output['input-groups'][] = '';
$output_code['input-groups'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
// Columns
$content_text['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('');
$form->addHtml('
');
$form->addInput('text', 'user-name', '', 'Name', 'required');
$form->addInput('text', 'user-first-name', '', 'First Name', 'required');
$form->addHtml('
');
$form->addHtml('
');
$form->addInput('email', 'user-email', '', 'Email', 'required');
$form->addInput('tel', 'user-phone', '', 'Phone', 'required');
$form->addHtml('
');
$form->addHtml('
';
$content_text['layout'] .= '
Layout is based on a Bootstrap 12 columns grid.
';
$content_text['layout'] .= '
setCols function sets labels and fields\'s number of columns.
';
$content_text['layout'] .= '
Default is 4 columns labels and 8 columns fields.
';
$content_text['layout'] .= '
See examples with code in templates:
https://www.phpformbuilder.pro/templates/bootstrap-4-forms/input-with-addons.php
https://www.phpformbuilder.pro/templates/bootstrap-3-forms/input-with-addons.php
https://www.phpformbuilder.pro/templates/material-forms/input-with-addons.php ';
$output_code['input-with-button-addon'][] = '// See examples with code in templates';
// Input without label
$form = new Form('my-form', 'horizontal', 'novalidate');
$form->setCols(0, 12);
$form->addIcon('user-name-4', 'See examples with code in templates
';
$output_code['input-with-floating-label'][] = '// See examples with code in templates';
// Several fields on same line
$form = new Form('my-form', 'horizontal', 'novalidate');
$form->setCols(0, 6);
$form->groupInputs('user-name-6', 'user-first-name-6');
$form->addIcon('user-name-6', 'Use $form->centerButtons(true); to center any button or button group
';
$php_code['button'][] = '$form->addBtn(\'submit\', \'submit-btn\', 1, \'Send <span class="fa fa-envelope append"></span>\', \'class=btn btn-success\');';
$output['button'][] = '';
$output_code['button'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
$form = new Form('my-form', 'horizontal', 'novalidate');
$form->setCols(0, 12);
$form->centerButtons(true);
$form->addBtn('submit', 'submit-btn', 1, 'Send
');
$php_code['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>\');';
$output['custom-html'][] = '';
$output_code['custom-html'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
// Default Values
$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_default_values = new Form('user-form');
$form_default_values->startFieldset('Update User');
$form_default_values->addInput('hidden', 'user_id', 1);
$form_default_values->addRadio('civility', 'M.', 'M.');
$form_default_values->addRadio('civility', 'Mrs.', 'Mrs.');
$form_default_values->addRadio('civility', 'Ms.', 'Ms.');
$form_default_values->printRadioGroup('civility', 'Civility : ');
$form_default_values->addInput('text', 'user-name-8', '', 'Name', 'size=60, required=required');
$form_default_values->addInput('text', 'user-first-name-8', '', 'First Name', 'size=60, required=required');
$form_default_values->addInput('email', 'user-email-8', '', 'email : ', 'size=60, required=required');
$form_default_values->addRadio('validated', 'Yes', 1);
$form_default_values->addRadio('validated', 'No', 0);
$form_default_values->printRadioGroup('validated', 'Validated');
$form_default_values->addBtn('button', 'cancel', 0, '\' . $db->error() . \'
\' . " \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, \'See examples with code here:jquery-plugins.php#modal-example templates
';
$output_code['modal-form'][] = '// See examples with code in templates or plugins page';
// Popover form
$php_code['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\');
?>';
$output['popover-form'][] = 'See examples with code here:jquery-plugins.php#popover-example templates
';
$output_code['popover-form'][] = '// See examples with code in templates or plugins page';
// Step form
$content_text['step-form'] = 'Please refer to one of these :
' . " \n";
// Accordion form
$content_text['accordion-form'] = 'Please refer to this template :
' . " \n";
// validation
$content_text['validation'] = 'Please refer to class-doc.php#validation-overview
' . " \n";
// email-sending
$content_text['email-sending'] = 'Please refer to class-doc.php#sendMail
' . " \n";
// database-crud
$content_text['database-crud'] = 'Please refer to class-doc.php#database-main
' . " \n";
$sections = array(
'Frameworks' => array(
array(
'title' => 'Included frameworks',
'anchor' => 'included-frameworks',
'doc-link' => 'class-doc.html#frameworks'
),
array(
'title' => 'Customize for other frameworks',
'anchor' => 'customize-for-other-frameworks',
'doc-link' => 'class-doc.html#options-customizing'
)
),
'Layout' => array(
array(
'title' => 'Horizontal forms',
'anchor' => 'horizontal-forms',
'doc-link' => 'class-doc.html#construct'
),
array(
'title' => 'Vertical forms',
'anchor' => 'vertical-forms',
'doc-link' => 'class-doc.html#construct'
),
array(
'title' => 'Inline forms',
'anchor' => 'inline-forms',
'doc-link' => 'class-doc.html#construct'
),
array(
'title' => 'Input groups',
'anchor' => 'input-groups',
'doc-link' => 'class-doc.html#groupInputs'
),
array(
'title' => 'Columns',
'anchor' => 'columns',
'doc-link' => 'class-doc.html#addHtml'
)
),
'Elements' => array(
array(
'title' => 'Input with label',
'anchor' => 'input-with-label',
'doc-link' => 'class-doc.php#addInput'
),
array(
'title' => 'Input with placeholder',
'anchor' => 'input-with-placeholder',
'doc-link' => 'class-doc.php#addInput'
),
array(
'title' => 'Input with icon',
'anchor' => 'input-with-icon',
'doc-link' => 'class-doc.php#add-icon'
),
array(
'title' => 'Input with button addon',
'anchor' => 'input-with-button-addon',
'doc-link' => ''
),
array(
'title' => 'Input without label',
'anchor' => 'input-without-label',
'doc-link' => 'class-doc.php#addInput'
),
array(
'title' => 'Input with floating label (Material)',
'anchor' => 'input-with-floating-label',
'doc-link' => ''
),
array(
'title' => 'Several fields on same line' . $content['title'] . ' ' . $section . '
' . $c['title'] . ' ' . " \n";
$html .= '' . $section . ' ' . " \n";
// no subnav
if (isset($content['title'])) {
$doc_link = '';
if (isset($content['doc-link']) && !empty($content['doc-link'])) {
$doc_link = 'doc. ';
}
$html .= '' . " \n";
$anchor = $content['anchor'];
$html .= '' . $content['title'] . $doc_link . ' ' . " \n";
if (isset($content_text[$anchor])) {
$html .= $content_text[$anchor];
}
// examples
if (isset($php_code[$anchor])) {
$nbre = count($php_code[$anchor]);
for ($i = 0; $i < $nbre; $i++) {
$html .= '' . " \n";
if ($nbre > 1) {
$html .= '
Example ' . ($i + 1) . '
' . " \n";
}
if (isset($php_code[$anchor][$i])) {
$html .= '
' . " \n";
}
if (isset($output[$anchor][$i])) {
$html .= '
' . $output[$anchor][$i] . '
';
}
if (isset($output_code[$anchor][$i])) {
$uniqid = uniqid();
$html .= '
show output code
';
$html .= '
' . $output_code[$anchor][$i] . '' . " \n";
}
$html .= '
' . " \n";
} else {
foreach ($content as $c) {
$doc_link = '';
if (isset($c['doc-link']) && !empty($content['doc-link'])) {
$doc_link = 'doc. ';
}
$html .= '' . " \n";
$anchor = $c['anchor'];
$html .= '' . $c['title'] . $doc_link . ' ' . " \n";
if (isset($content_text[$anchor])) {
$html .= $content_text[$anchor];
}
// examples
if (isset($php_code[$anchor])) {
$nbre = count($php_code[$anchor]);
for ($i = 0; $i < $nbre; $i++) {
$html .= '' . " \n";
if ($nbre > 1) {
$html .= '
Example ' . ($i + 1) . ' ' . " \n";
}
if (isset($php_code[$anchor][$i])) {
$html .= '
' . " \n";
}
if (isset($output[$anchor][$i])) {
$html .= '
' . $output[$anchor][$i] . '
';
}
if (isset($output_code[$anchor][$i])) {
$uniqid = uniqid();
$html .= '
show output code
';
$html .= '
' . $output_code[$anchor][$i] . '' . " \n";
}
$html .= '
' . " \n";
}
}
$html .= ' ' . " \n";
}
echo $html;
}
?>
'PHP Form Builder - Using functions and code samples',
'description' => 'Examples of using PHP Form Builder functions to add fields to your forms, formatting them, managing the layout and using jQuery plugins',
'canonical' => 'https://www.phpformbuilder.pro/documentation/code-samples.php',
'screenshot' => 'code-samples.png'
);
include_once 'inc/page-head.php';
?>
Toggle navigation
Code Samples
