1006 lines
67 KiB
PHP
Executable File
1006 lines
67 KiB
PHP
Executable File
<?php
|
|
use phpformbuilder\Form;
|
|
|
|
session_start();
|
|
include_once '../phpformbuilder/Form.php';
|
|
|
|
$content_text = array();
|
|
$output = array();
|
|
$output_code = array();
|
|
$php_code = array();
|
|
|
|
// Included frameworks
|
|
$content_text['included-frameworks'] = '<p class="lead">This document gives you quick examples of different layouts and form elements.</p>
|
|
<p>Most examples are displayed using Bootstrap 4 layout.<br>The other frameworks (<strong><em>Bootstrap 3</em></strong>, <strong><em>Foundation</em></strong>, and <strong><em>Material Design</em></strong>) are using the same markup.</p>
|
|
<p>To change the framework you just have to change the framework argument when you instanciate your form.</p>';
|
|
|
|
$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\');';
|
|
|
|
?>
|
|
|
|
<?php
|
|
|
|
// Customize for other frameworks
|
|
$content_text['customize-for-other-frameworks'] = '<p>Each framework has its own markup and CSS classes. For example, some framework wrap radio buttons & checkboxes into their label, whereas others don\'t.<p>
|
|
<p>Bootstrap adds a CSS <em>form-control</em> class to the form elements, but other frameworks don\'t.</p>
|
|
<p>All these specificities are defined by the <span class="var-value">options</span> property of the form, including responsive rows & columns.</p>
|
|
<p><strong>The HTML code generated by PHP Form Builder can be easily customized to be used with any framework:<br>Semantic-UI, Pure, Skeleton, UIKit, Milligram, Susy, Bulma, Kube, ...</strong></p>';
|
|
$php_code['customize-for-other-frameworks'][] = '$custom_options = array(
|
|
// options here
|
|
);
|
|
$form->setOptions($custom_options);';
|
|
|
|
// Horizontal forms
|
|
$content_text['horizontal-forms'] = '<p>In horizontal forms, labels and fields are displayed in two responsive columns whose width you can define.</p>';
|
|
|
|
$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'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['horizontal-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Vertical forms
|
|
$content_text['vertical-forms'] = '<p>In vertical forms, labels are displayed above the fields. Vertical forms don\'t use columns.</p>';
|
|
|
|
$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'][] = '<form>' . $form->html . '</form>';
|
|
$output_code['vertical-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Inline forms
|
|
$content_text['inline-forms'] = '<p>Inline forms display labels and fields on the line without containers.</p>';
|
|
|
|
$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'][] = '<form class="form-inline">' . $form->html . '</form>';
|
|
$output_code['inline-forms'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Input groups
|
|
$content_text['input-groups'] = '<p>Input groups allow you to group several fields in the same row.</p>
|
|
<p>This is only possible in horizontal forms, which are the only ones to use a responsive layout with columns and rows.</p>';
|
|
|
|
$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'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['input-groups'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Columns
|
|
$content_text['columns'] = '<p>To create a 2-column form, insert the html code in the appropriate places using the <span class="var-value">addHtml()</span> function.</p>';
|
|
|
|
$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>');
|
|
|
|
$php_code['columns'][] = '$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>\');';
|
|
$output['columns'][] = '<form>' . $form->html . '</form>';
|
|
$output_code['columns'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Layout (Columns)
|
|
$content_text['layout'] = '<div class="mb-md">';
|
|
$content_text['layout'] .= '<p><strong>Layout is based on a Bootstrap 12 columns grid.</strong></p>';
|
|
$content_text['layout'] .= '<p><strong>setCols</strong> function sets labels and fields\'s number of columns.</p>';
|
|
$content_text['layout'] .= '<p><strong>Default is 4 columns labels and 8 columns fields.</strong></p>';
|
|
$content_text['layout'] .= '</div>';
|
|
|
|
$php_code['layout'][] = '// set 3 columns labels and 9 columns fields
|
|
$form->setCols(3, 9);
|
|
|
|
// set no label (or Material floating label + 12 columns fields
|
|
$form->setCols(0, 12);';
|
|
|
|
// Input with label
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addInput('text', 'user-name-1', 'value', 'User Name', 'required');
|
|
|
|
$php_code['input-with-label'][] = '$form->addInput(\'text\', \'user-name-1\', \'value\', \'User Name\', \'required\');';
|
|
$output['input-with-label'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['input-with-label'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Input with placeholder
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addInput('text', 'user-name-2', '', 'User Name', 'placeholder=Your Name, required');
|
|
|
|
$php_code['input-with-placeholder'][] = '$form->addInput(\'text\', \'user-name-2\', \'\', \'User Name\', \'placeholder=Your Name, required\');';
|
|
$output['input-with-placeholder'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['input-with-placeholder'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Input with icon
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addIcon('user-name-3', '<span class="fa fa-user"></span>', 'before');
|
|
$form->addInput('text', 'user-name-3', '', 'User Name', 'placeholder=Your Name, required');
|
|
|
|
$php_code['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\');';
|
|
$output['input-with-icon'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['input-with-icon'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// input with button addon
|
|
|
|
$php_code['input-with-button-addon'][] = '// See examples with code in templates';
|
|
$output['input-with-button-addon'][] = '<p>See examples with code in templates:</p>
|
|
<a href="https://www.phpformbuilder.pro/templates/bootstrap-4-forms/input-with-addons.php">https://www.phpformbuilder.pro/templates/bootstrap-4-forms/input-with-addons.php</a>
|
|
<a href="https://www.phpformbuilder.pro/templates/bootstrap-3-forms/input-with-addons.php">https://www.phpformbuilder.pro/templates/bootstrap-3-forms/input-with-addons.php</a>
|
|
<a href="https://www.phpformbuilder.pro/templates/material-forms/input-with-addons.php">https://www.phpformbuilder.pro/templates/material-forms/input-with-addons.php</a>';
|
|
$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', '<span class="fa fa-user"></span>', 'before');
|
|
$form->addInput('text', 'user-name-4', '', '', 'placeholder=Your Name, required');
|
|
|
|
$php_code['input-without-label'][] = '$form->setCols(0, 12);
|
|
$form->addIcon(\'user-name-4\', \'<span class="fa fa-user"></span>\', \'before\');
|
|
$form->addInput(\'text\', \'user-name-4\', \'\', \'\', \'placeholder=Your Name, required\');';
|
|
$output['input-without-label'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['input-without-label'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// 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');
|
|
|
|
$php_code['input-with-floating-label'][] = '$form = new Form(\'my-form\', \'horizontal\', \'novalidate\', \'material\');
|
|
$form->setCols(0, 12);
|
|
$form->addInput(\'text\', \'user-name-5\', \'\', \'Your Name\', \'required\');';
|
|
$output['input-with-floating-label'][] = '<p>See examples with code in <a href="https://www.phpformbuilder.pro/templates">templates</a></p>';
|
|
$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', '<span class="fa fa-user"></span>', 'before');
|
|
$form->addInput('text', 'user-name-6', '', '', 'required=required, placeholder=Name*');
|
|
$form->addInput('text', 'user-first-name-6', '', '', 'placeholder=First Name');
|
|
|
|
$php_code['several-fields-on-same-line'][] = '$form->setCols(0, 6);
|
|
$form->groupInputs(\'user-name-6\', \'user-first-name-6\');
|
|
$form->addIcon(\'user-name-6\', \'<span class="fa fa-user"></span>\', \'before\');
|
|
$form->addInput(\'text\', \'user-name-6\', \'\', \'\', \'required=required, placeholder=Name*\');
|
|
$form->addInput(\'text\', \'user-first-name-6\', \'\', \'\', \'placeholder=First Name\');';
|
|
$output['several-fields-on-same-line'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['several-fields-on-same-line'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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();
|
|
|
|
$php_code['several-fields-on-same-line'][] = '$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();';
|
|
$output['several-fields-on-same-line'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['several-fields-on-same-line'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Textarea
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addTextarea('special-request', '', 'Any Special Request?');
|
|
|
|
$php_code['textarea'][] = '$form->addTextarea(\'special-request\', \'\', \'Any Special Request?\');';
|
|
$output['textarea'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['textarea'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Select
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addOption('prefix', '', 'Choose one ...', '', 'disabled, selected');
|
|
$form->addOption('prefix', 'Mr', 'Mr');
|
|
$form->addOption('prefix', 'Mrs', 'Mrs');
|
|
$form->addSelect('prefix', 'Full Name', 'required=required');
|
|
|
|
$php_code['select'][] = '$form->addOption(\'prefix\', \'\', \'Choose one ...\', \'\', \'disabled, selected\');
|
|
$form->addOption(\'prefix\', \'Mr\', \'Mr\');
|
|
$form->addOption(\'prefix\', \'Mrs\', \'Mrs\');
|
|
$form->addSelect(\'prefix\', \'Full Name\', \'required=required\');';
|
|
$output['select'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['select'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addOption('favourite-animal', '', 'Choose one ...', '', 'disabled');
|
|
$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');
|
|
$php_code['select'][] = '$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\');';
|
|
$output['select'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['select'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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[]');
|
|
|
|
$php_code['select'][] = '$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[]\');';
|
|
$output['select'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['select'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Radio
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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');
|
|
|
|
$php_code['radio'][] = '$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\');';
|
|
$output['radio'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['radio'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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');
|
|
|
|
$php_code['radio'][] = '$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\');';
|
|
$output['radio'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['radio'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Checkbox
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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');
|
|
|
|
$php_code['checkbox'][] = '$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\');';
|
|
$output['checkbox'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['checkbox'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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);
|
|
|
|
$php_code['checkbox'][] = '$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);';
|
|
$output['checkbox'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['checkbox'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Button
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="fa fa-envelope append"></span>', 'class=btn btn-success');
|
|
|
|
$content_text['button'] = '<p>Use <code>$form->centerButtons(true);</code> to center any button or button group</p>';
|
|
|
|
$php_code['button'][] = '$form->addBtn(\'submit\', \'submit-btn\', 1, \'Send <span class="fa fa-envelope append"></span>\', \'class=btn btn-success\');';
|
|
$output['button'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$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 <span class="fa fa-envelope append"></span>', 'class=btn btn-success');
|
|
|
|
$php_code['button'][] = '$form->setCols(0, 12);
|
|
$form->centerButtons(true);
|
|
$form->addBtn(\'submit\', \'submit-btn\', 1, \'Send <span class="fa fa-envelope append"></span>\', \'class=btn btn-success\');';
|
|
$output['button'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['button'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Button group
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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');
|
|
|
|
$php_code['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\');';
|
|
$output['button-group'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$output_code['button-group'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form->html)));
|
|
|
|
// Custom html
|
|
$form = new Form('my-form', 'horizontal', 'novalidate');
|
|
$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>');
|
|
|
|
$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'][] = '<form class="form-horizontal">' . $form->html . '</form>';
|
|
$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, '<span class="fa fa-ban prepend"></span>Cancel', 'class=btn btn-warning', 'btn-group');
|
|
$form_default_values->addBtn('submit', 'submit', 1, 'Submit <span class="fa fa-check append"></span>', 'class=btn btn-success', 'btn-group');
|
|
$form_default_values->printBtnGroup('btn-group');
|
|
$form_default_values->endFieldset();
|
|
|
|
$php_code['default-values-from-db'][] = '<?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 = \'<p class="alert alert-danger">\' . $db->error() . \'<br>\' . $db->getLastSql() . \'</p>\' . " \n";
|
|
} else {
|
|
$msg = \'<p class="alert alert-success">Database updated successfully !</p>\' . " \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, \'<span class="fa fa-ban prepend"></span>Cancel\', \'class=btn btn-warning\', \'btn-group\');
|
|
$form->addBtn(\'submit\', \'submit\', 1, \'Submit <span class="fa fa-check append"></span>\', \'class=btn btn-success\', \'btn-group\');
|
|
$form->printBtnGroup(\'btn-group\');
|
|
$form->endFieldset();
|
|
?>';
|
|
$output['default-values-from-db'][] = $form_default_values->render(false, false);
|
|
$output_code['default-values-from-db'][] = trim(htmlspecialchars($form_default_values->cleanHtmlOutput($form_default_values->html)));
|
|
|
|
// 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-9'] = 'Wilson';
|
|
$_SESSION['test-form']['preferred-colors'] = array('blue', 'green');
|
|
}
|
|
$form_values = new Form('test-form', 'horizontal', 'novalidate');
|
|
$form_values->addRadio('civility-1', 'M.', 'M.');
|
|
$form_values->addRadio('civility-1', 'Mrs.', 'Mrs.');
|
|
$form_values->addRadio('civility-1', 'Ms.', 'Ms.');
|
|
$form_values->printRadioGroup('civility-1', 'Civility : ');
|
|
$form_values->addInput('text', 'user-name-9', '', 'Name', 'size=60, required');
|
|
$form_values->addOption('preferred-colors', 'red', 'red');
|
|
$form_values->addOption('preferred-colors', 'green', 'green');
|
|
$form_values->addOption('preferred-colors', 'yellow', 'yellow');
|
|
$form_values->addOption('preferred-colors', 'pink', 'pink');
|
|
$form_values->addOption('preferred-colors', 'blue', 'blue');
|
|
$form_values->addOption('preferred-colors', 'purple', 'purple');
|
|
$form_values->addOption('preferred-colors', 'black', 'black');
|
|
$form_values->addSelect('preferred-colors', 'Prefered colors', 'multiple');
|
|
$php_code['default-values-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()';
|
|
$output['default-values-variables'][] = $form_values->render(false, false);
|
|
$output_code['default-values-variables'][] = trim(htmlspecialchars($form->cleanHtmlOutput($form_values->render(false, false))));
|
|
|
|
// Modal form
|
|
$php_code['modal-form'][] = '<!-- HTML modal link -->
|
|
<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\');
|
|
?>';
|
|
$output['modal-form'][] = '<p>See examples with code here:<br><a href="jquery-plugins.php#modal-example">jquery-plugins.php#modal-example</a><br><a href="https://www.phpformbuilder.pro/templates">templates</a></p>';
|
|
$output_code['modal-form'][] = '// See examples with code in templates or plugins page';
|
|
|
|
// Popover form
|
|
$php_code['popover-form'][] = '<!-- HTML popover link -->
|
|
<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'][] = '<p>See examples with code here:<br><a href="jquery-plugins.php#popover-example">jquery-plugins.php#popover-example</a><br><a href="https://www.phpformbuilder.pro/templates">templates</a></p>';
|
|
$output_code['popover-form'][] = '// See examples with code in templates or plugins page';
|
|
|
|
// Step form
|
|
$content_text['step-form'] = '<p><strong>Please refer to one of these :</strong></p>
|
|
<ul>
|
|
<li><a href="../templates/bootstrap-4-forms/simple-step-form.php">Simple step form</a></li>
|
|
<li><a href="../templates/bootstrap-4-forms/customer-satisfaction-step-form.php">Customer satisfaction step form</a></li>
|
|
</ul>' . " \n";
|
|
|
|
// Accordion form
|
|
$content_text['accordion-form'] = '<p><strong>Please refer to this template :</strong></p>
|
|
<ul>
|
|
<li><a href="../templates/bootstrap-4-forms/car-rental-form.php">bootstrap car rental form</a></li>
|
|
</ul>' . " \n";
|
|
|
|
// validation
|
|
$content_text['validation'] = '<p><strong>Please refer to <a href="class-doc.php#validation-overview">class-doc.php#validation-overview</a></strong></p>' . " \n";
|
|
|
|
// email-sending
|
|
$content_text['email-sending'] = '<p><strong>Please refer to <a href="class-doc.php#sendMail">class-doc.php#sendMail</a></strong></p>' . " \n";
|
|
|
|
// database-crud
|
|
$content_text['database-crud'] = '<p><strong>Please refer to <a href="class-doc.php#database-main">class-doc.php#database-main</a></strong></p>' . " \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<br>(input groups)',
|
|
'anchor' => 'several-fields-on-same-line',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'Textarea',
|
|
'anchor' => 'textarea',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'Select',
|
|
'anchor' => 'select',
|
|
'doc-link' => 'class-doc.php#addSelect'
|
|
),
|
|
array(
|
|
'title' => 'Radio',
|
|
'anchor' => 'radio',
|
|
'doc-link' => 'class-doc.php#addRadio'
|
|
),
|
|
array(
|
|
'title' => 'Checkbox',
|
|
'anchor' => 'checkbox',
|
|
'doc-link' => 'class-doc.php#addCheckbox'
|
|
),
|
|
array(
|
|
'title' => 'Button',
|
|
'anchor' => 'button',
|
|
'doc-link' => 'class-doc.php#addBtn'
|
|
),
|
|
array(
|
|
'title' => 'Button group',
|
|
'anchor' => 'button-group',
|
|
'doc-link' => 'class-doc.php#printBtnGroup'
|
|
),
|
|
array(
|
|
'title' => 'Custom html',
|
|
'anchor' => 'custom-html',
|
|
'doc-link' => 'class-doc.php#addHtml'
|
|
)
|
|
),
|
|
'Default Values' => array(
|
|
array(
|
|
'title' => 'From database',
|
|
'anchor' => 'default-values-from-db',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'From variables',
|
|
'anchor' => 'default-values-variables',
|
|
'doc-link' => ''
|
|
)
|
|
),
|
|
'Special forms' => array(
|
|
array(
|
|
'title' => 'Modal form',
|
|
'anchor' => 'modal-form',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'Popover form',
|
|
'anchor' => 'popover-form',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'Step form',
|
|
'anchor' => 'step-form',
|
|
'doc-link' => ''
|
|
),
|
|
array(
|
|
'title' => 'Accordion form',
|
|
'anchor' => 'accordion-form',
|
|
'doc-link' => ''
|
|
)
|
|
),
|
|
'Validation' => array(
|
|
'title' => 'Validation',
|
|
'anchor' => 'validation',
|
|
'doc-link' => 'class-doc.php#validation-examples'
|
|
),
|
|
'Email sending' => array(
|
|
'title' => 'Email sending',
|
|
'anchor' => 'email-sending',
|
|
'doc-link' => 'class-doc.php#sendMail'
|
|
),
|
|
'Database CRUD' => array(
|
|
'title' => 'Database CRUD',
|
|
'anchor' => 'database-crud',
|
|
'doc-link' => 'class-doc.php#database-main'
|
|
)
|
|
);
|
|
|
|
function buildLeftNav($sections)
|
|
{
|
|
$html = '';
|
|
foreach ($sections as $section => $content) {
|
|
// no subnav
|
|
if (isset($content['title'])) {
|
|
$html .= '<li class="nav-item"><a class="nav-link" href="#' . $content['anchor'] . '">' . $content['title'] . '</a></li>' . " \n";
|
|
} else {
|
|
// with subnav
|
|
|
|
// main nav
|
|
$html .= '<li class="nav-item"><p class="h4 text-center my-4">' . $section . '</p></li>' . " \n";
|
|
|
|
foreach ($content as $c) {
|
|
$html .= '<li class="nav-item"><a class="nav-link" href="#' . $c['anchor'] . '">' . $c['title'] . '</a></li>' . " \n";
|
|
}
|
|
}
|
|
}
|
|
echo $html;
|
|
}
|
|
|
|
function buildContent($sections, $content_text, $php_code, $output, $output_code)
|
|
{
|
|
$html = '';
|
|
foreach ($sections as $section => $content) {
|
|
$html .= '<section class="pb-7">' . " \n";
|
|
$html .= '<h2>' . $section . '</h2>' . " \n";
|
|
// no subnav
|
|
if (isset($content['title'])) {
|
|
$doc_link = '';
|
|
if (isset($content['doc-link']) && !empty($content['doc-link'])) {
|
|
$doc_link = '<a href="' . $content['doc-link'] . '" class="btn btn-xs btn-primary pull-right">doc.</a>';
|
|
}
|
|
$html .= '<article class="pb-5 mb-7 has-separator">' . " \n";
|
|
$anchor = $content['anchor'];
|
|
$html .= '<h3 id="' . $anchor . '">' . $content['title'] . $doc_link . '</h3>' . " \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 .= '<div class="mb-6">' . " \n";
|
|
if ($nbre > 1) {
|
|
$html .= '<p class="h4 mb-2 border-bottom">Example ' . ($i + 1) . '</p>' . " \n";
|
|
}
|
|
if (isset($php_code[$anchor][$i])) {
|
|
$html .= '<div class="form-code"><pre class="line-numbers mb-4"><code class=" language-php">' . $php_code[$anchor][$i] . '</code></pre></div>' . " \n";
|
|
}
|
|
if (isset($output[$anchor][$i])) {
|
|
$html .= '<div class="output"><div class="form-element">' . $output[$anchor][$i] . '</div></div>';
|
|
}
|
|
if (isset($output_code[$anchor][$i])) {
|
|
$uniqid = uniqid();
|
|
$html .= '<p class="text-right"><a class="btn btn-sm btn-primary" data-toggle="collapse" href="#a' . $uniqid . '" role="button" aria-expanded="false" aria-controls="a' . $uniqid . '">
|
|
show output code</a></p>';
|
|
$html .= '<div class="output-code collapse" id="a' . $uniqid . '"><pre class="line-numbers language-php"><code class=" language-php">' . $output_code[$anchor][$i] . '</code></pre></div>' . " \n";
|
|
}
|
|
$html .= '</div>' . " \n";
|
|
}
|
|
}
|
|
$html .= '</article>' . " \n";
|
|
} else {
|
|
foreach ($content as $c) {
|
|
$doc_link = '';
|
|
if (isset($c['doc-link']) && !empty($content['doc-link'])) {
|
|
$doc_link = '<a href="' . $c['doc-link'] . '" class="btn btn-xs btn-primary pull-right">doc.</a>';
|
|
}
|
|
$html .= '<article class="pb-5 mb-7 has-separator">' . " \n";
|
|
$anchor = $c['anchor'];
|
|
$html .= '<h3 id="' . $anchor . '">' . $c['title'] . $doc_link . '</h3>' . " \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 .= '<div class="mb-6">' . " \n";
|
|
if ($nbre > 1) {
|
|
$html .= '<h4 class="mb-2 border-bottom">Example ' . ($i + 1) . '</h4>' . " \n";
|
|
}
|
|
if (isset($php_code[$anchor][$i])) {
|
|
$html .= '<div class="form-code"><pre class="line-numbers language-php"><code class=" language-php">' . $php_code[$anchor][$i] . '</code></pre></div>' . " \n";
|
|
}
|
|
if (isset($output[$anchor][$i])) {
|
|
$html .= '<div class="output"><div class="form-element">' . $output[$anchor][$i] . '</div></div>';
|
|
}
|
|
if (isset($output_code[$anchor][$i])) {
|
|
$uniqid = uniqid();
|
|
$html .= '<p class="text-right"><a class="btn btn-sm btn-primary" data-toggle="collapse" href="#a' . $uniqid . '" role="button" aria-expanded="false" aria-controls="a' . $uniqid . '">
|
|
show output code</a></p>';
|
|
$html .= '<div class="output-code collapse" id="a' . $uniqid . '"><pre class="line-numbers language-php"><code class=" language-php">' . $output_code[$anchor][$i] . '</code></pre></div>' . " \n";
|
|
}
|
|
$html .= '</div>' . " \n";
|
|
}
|
|
}
|
|
$html .= '</article>' . " \n";
|
|
}
|
|
}
|
|
$html .= '</section>' . " \n";
|
|
}
|
|
|
|
echo $html;
|
|
}
|
|
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<?php
|
|
$meta = array(
|
|
'title' => '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';
|
|
?>
|
|
<style type="text/css">
|
|
@-ms-viewport{width:device-width}@font-face{font-family:icomoon;font-display: swap;src:url(../documentation/assets/fonts/icomoon.eot?rnh868);src:url(../documentation/assets/fonts/icomoon.eot?rnh868#iefix) format("embedded-opentype"),url(../documentation/assets/fonts/icomoon.ttf?rnh868) format("truetype"),url(../documentation/assets/fonts/icomoon.woff?rnh868) format("woff"),url(../documentation/assets/fonts/icomoon.svg?rnh868#icomoon) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Roboto;font-display: swap;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(../documentation/assets/fonts/roboto-v18-latin-300.woff2) format("woff2"),url(../documentation/assets/fonts/roboto-v18-latin-300.woff) format("woff")}@font-face{font-family:Roboto;font-display: swap;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(../documentation/assets/fonts/roboto-v18-latin-regular.woff2) format("woff2"),url(../documentation/assets/fonts/roboto-v18-latin-regular.woff) format("woff")}@font-face{font-family:Roboto;font-display: swap;font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(../documentation/assets/fonts/roboto-v18-latin-500.woff2) format("woff2"),url(../documentation/assets/fonts/roboto-v18-latin-500.woff) format("woff")}@font-face{font-family:'Roboto Condensed';font-display: swap;font-style:normal;font-weight:400;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../documentation/assets/fonts/roboto-condensed-v16-latin-regular.woff2) format("woff2"),url(../documentation/assets/fonts/roboto-condensed-v16-latin-regular.woff) format("woff")}.output-code>pre:after{font-family:Roboto;font-size:.8125rem;position:absolute;top:0;right:0;padding:0 15px;height:24px;line-height:24px;background:#46423b;color:#fff;border-radius:0 .25rem}.dmca-badge{min-height:100px}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}article,nav,section{display:block}body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:15px;font-weight:400;line-height:1.5;color:#2a2d2d;text-align:left;background-color:#fff}h1,h2,h3{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}ul{margin-top:0;margin-bottom:1rem}strong{font-weight:bolder}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}code,pre{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}img{vertical-align:middle;border-style:none}button{border-radius:0}button,input,optgroup{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button{text-transform:none}button{-webkit-appearance:button}button::-moz-focus-inner{padding:0;border-style:none}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}.h4,h1,h2,h3{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}h1{font-size:40px}h2{font-size:30px}h3{font-size:26.25px}.h4{font-size:22.5px}.lead{font-size:1.25rem;font-weight:300}code{font-size:87.5%;color:#e83e8c;word-break:break-word}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:15px;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.form-control{-webkit-transition:none;-o-transition:none;transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:15px;line-height:1.5;border-radius:.25rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.btn{-webkit-transition:none;-o-transition:none;transition:none}}.btn:not(:disabled):not(.disabled){cursor:pointer}.btn-danger{color:#fff;background-color:#fc4848;border-color:#fc4848;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.collapse:not(.show){display:none}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-pills .nav-link{border-radius:0}.navbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container-fluid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:0;padding-bottom:0;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:not(:disabled):not(.disabled){cursor:pointer}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:center center no-repeat;background-size:100% 100%}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link.active{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.d-inline-block{display:inline-block!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.px-0{padding-right:0!important}.px-0{padding-left:0!important}.bg-dark{background-color:#343a40!important}@media (min-width:992px){.navbar-expand-lg{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:1rem;padding-left:1rem}.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}h1{color:#007bff!important}.text-danger{color:#dc3545!important}.bg-dark{background-color:#23211e!important}.bg-white{background-color:#fff!important}.btn .icon-circle,.d-inline-block{display:inline-block!important}.d-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.flex-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.float-right{float:right!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.w-100{width:100%!important}.mr-1{margin-right:.25rem!important}.ml-2{margin-left:.5rem!important}.mr-3{margin-right:1rem!important}.h4{margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important}.mb-4,.my-4,h3{margin-bottom:1.5rem!important}.has-separator,h2{margin-bottom:3rem!important}.mb-6{margin-bottom:6.25rem!important}.mb-7{margin-bottom:12.5rem!important}.px-0,pre>code[class*=language]{padding-right:0!important}.px-0,pre>code[class*=language]{padding-left:0!important}.pt-1{padding-top:.25rem!important}code[class*=language]{padding-right:.25rem!important}code[class*=language]{padding-left:.25rem!important}.p-2{padding:.5rem!important}.py-2{padding-top:.5rem!important}.px-2{padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.px-2{padding-left:.5rem!important}.p-4{padding:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.pb-7{padding-bottom:12.5rem!important}.ml-auto{margin-left:auto!important}.text-center{text-align:center!important}.text-white{color:#fff!important}h1{color:#0e73cc!important}.text-danger{color:#fc4848!important}#website-navbar{font-family:'Roboto Condensed';-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.15);box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}#website-navbar .navbar-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;margin-top:1rem}#website-navbar .navbar-nav .nav-item{line-height:1.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}#website-navbar .navbar-nav .nav-link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;text-transform:uppercase;font-size:.875rem;padding-left:1rem;padding-right:1rem;padding-top:.5rem;padding-bottom:.5rem}#website-navbar .navbar-nav .nav-link.active{text-decoration:none;background-color:#46423b}@media (min-width:992px){.d-lg-none{display:none!important}#website-navbar{-webkit-box-shadow:0 2px 1px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24);box-shadow:0 2px 1px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24)}#website-navbar .navbar-nav{margin-top:0}#website-navbar .navbar-nav .nav-link{font-size:.8125rem;padding-left:.75rem;padding-right:.75rem;height:100%}#website-navbar .navbar-brand{margin-bottom:0;font-size:1.0625rem}}#navbar-left-wrapper{display:none;position:fixed;top:72px;padding-right:0;width:230px;height:100%;background-color:#23211e;z-index:2;-webkit-box-shadow:2px 0 1px rgba(0,0,0,.12),1px 0 1px rgba(0,0,0,.24);box-shadow:2px 0 1px rgba(0,0,0,.12),1px 0 1px rgba(0,0,0,.24)}#navbar-left-wrapper #navbar-left-collapse{display:none}#navbar-left-wrapper~.container{padding-left:230px}@media (min-width:992px){#navbar-left-wrapper{display:block}}@media (max-width:991.98px){.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}#navbar-left-wrapper #navbar-left-collapse{display:block}#navbar-left-wrapper~.container{padding-left:15px}.w3-animate-left{position:relative;-webkit-animation:.4s animateleft;animation:.4s animateleft}@-webkit-keyframes animateleft{from{left:-230px;opacity:0}to{left:0;opacity:1}}@keyframes animateleft{from{left:-230px;opacity:0}to{left:0;opacity:1}}}#navbar-left{z-index:100;position:relative;width:100%;color:#fff;background-color:#23211e;-webkit-box-shadow:0 1px 0 #030303;box-shadow:0 1px 0 #030303}#navbar-left li{margin:0;padding:0}#navbar-left>li>a{padding:12px 20px 12px 18px;border-top:1px solid #3e3b36;border-bottom:1px solid #0d0c0b;text-shadow:1px 1px 0 #3e3b36;color:#fff;background-color:#312e2a;font-size:13px;font-weight:400}[class^=icon-]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{position:relative;min-height:100%}body{counter-reset:section}.h4,h1,h2,h3{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}h1{line-height:.9;margin-bottom:2.5rem;font-weight:400}h1::first-letter{font-size:2em;font-weight:500}h2{font-weight:300;color:#8c8476;border-bottom:1px solid #8c8476}.h4,h3{font-weight:300;color:#a9a398}h3{font-variant:small-caps}p.lead{font-weight:400;color:#696359}code,code[class*=language],pre{font-size:.75rem}strong{font-weight:500}section>h2{padding:1rem;border-bottom:1px solid #ddd}article>h3:before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;margin-bottom:3px;border-radius:50%;background:#00c2db}article>h3:before{background:#00c2db}.form-code>pre:after,.output-code>pre:after{font-family:Roboto;font-size:.8125rem;position:absolute;top:0;right:0;padding:0 15px;height:24px;line-height:24px;background:#46423b;color:#fff;border-radius:0 .25rem}.output-code{position:relative}.output-code>pre:after{content:'output-code'}.form-code>pre:after{content:'form code'}.btn .icon-circle{width:24px;height:24px;line-height:24px;border-radius:50%}.has-separator{display:block;position:relative}.has-separator:after,.has-separator:before{position:absolute;left:50%;height:1px;content:'';background:#c6c2bb}.has-separator:before{bottom:-16px;width:12%;margin-left:-6%}.has-separator:after{bottom:-13px;width:20%;margin-left:-10%}code[class*=language-],pre[class*=language-]{position:relative;color:#ccc;background:0 0;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.25rem!important}pre[class*=language-]{background:#2d2d2d}pre[class*=language-].line-numbers{padding-left:3.8em;counter-reset:a}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.fa-times:before{content:"\f00d"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
|
|
</style>
|
|
<?php require_once 'inc/css-includes.php'; ?>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<?php
|
|
$form->printIncludes('css');
|
|
?>
|
|
</head>
|
|
<body style="padding-top:76px;" data-spy="scroll" data-target="#navbar-left-wrapper" data-offset="180">
|
|
|
|
<!-- Main navbar -->
|
|
|
|
<!--LSHIDE-->
|
|
|
|
<nav id="website-navbar" class="navbar navbar-dark bg-dark navbar-expand-lg fixed-top">
|
|
<div class="container-fluid px-0">
|
|
<a class="navbar-brand mr-3" href="https://www.phpformbuilder.pro"><img src="assets/images/phpformbuilder-logo.png" width="60" height="60" class="mr-3" alt="PHP Form Builder" title="PHP Form Builder">PHP Form Builder</a>
|
|
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navcol-1">
|
|
<ul class="nav navbar-nav ml-auto">
|
|
|
|
<!-- https://www.phpformbuilder.pro navbar -->
|
|
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="../index.html">Home</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="../drag-n-drop-form-builder/index.php">Drag & drop Form Builder</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="quick-start-guide.php">Quick Start Guide</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="../templates/index.php">Form Templates</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="jquery-plugins.php">jQuery Plugins</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link active" href="code-samples.php">Code Samples</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="class-doc.php">Class Doc.</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="functions-reference.php">Functions Reference</a></li>
|
|
<li class="nav-item" role="presentation"><a class="nav-link" href="help-center.php">Help Center</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!--/LSHIDE-->
|
|
|
|
<!-- Main sidebar -->
|
|
|
|
<div class="navbar-light p-2 d-lg-none d-xlg-none">
|
|
<button id="navbar-left-toggler" class="navbar-toggler"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
</div>
|
|
<div id="navbar-left-wrapper" class="w3-animate-left">
|
|
<a href="#" id="navbar-left-collapse" class="d-inline-block d-lg-none d-xlg-none float-right text-white p-4"><i class="fas fa-times"></i></a>
|
|
<ul id="navbar-left" class="nav nav-pills flex-column pt-1 mb-4" role="tablist" aria-orientation="vertical">
|
|
<?php buildLeftNav($sections); ?>
|
|
</ul>
|
|
<div class="text-center mb-xs"><a href="//www.dmca.com/Protection/Status.aspx?ID=93cc7d61-a9d4-4474-a327-a29620d661fb" title="DMCA.com Protection Status" class="dmca-badge"><img data-src="//images.dmca.com/Badges/dmca-badge-w100-1x1-01.png?ID=93cc7d61-a9d4-4474-a327-a29620d661fb" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="lazyload" alt="DMCA.com Protection Status" width="100" height="100"></a><script defer src="//images.dmca.com/Badges/DMCABadgeHelper.min.js"></script></div>
|
|
<div class="text-center mb-7">
|
|
<a href="https://www.hack-hunt.com" title="Send DMCA Takedown Notice" class="text-white">www.hack-hunt.com</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /main sidebar -->
|
|
|
|
<div class="container">
|
|
|
|
<?php include_once 'inc/top-section.php'; ?>
|
|
|
|
<h1 id="home">Code Samples</h1>
|
|
<?php buildContent($sections, $content_text, $php_code, $output, $output_code); ?>
|
|
</div>
|
|
<!-- container -->
|
|
<?php require_once 'inc/js-includes.php'; ?>
|
|
</body>
|
|
</html>
|