'Ajax Loaded Contact Form 1', 'desc' => 'Contact form in HTML file loaded with Ajax', 'desc-class' => '', 'link' => '/ajax-loaded-contact-form-1.html', 'class' => 'ajax contact-form has-captcha has-checkbox has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail' ), array( 'title' => 'Contact Form 1', 'desc' => 'Horizontal contact form with captcha', 'desc-class' => '', 'link' => '/contact-form-1.php', 'class' => 'contact-form has-captcha has-checkbox has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail' ), array( 'title' => 'Contact Form 1 loaded with Loadjs', 'desc' => 'Horizontal contact form with captcha', 'desc-class' => '', 'link' => '/contact-form-1-loadjs.php', 'class' => 'contact-form has-captcha has-checkbox loadjs has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail' ), array( 'title' => 'Contact Form 1 Modal', 'desc' => 'Horizontal contact form with captcha', 'desc-class' => '', 'link' => '/contact-form-1-modal.php', 'class' => 'contact-form has-captcha has-checkbox modal-form has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail' ), array( 'title' => 'Contact Form 1 Popover', 'desc' => 'Horizontal contact form with captcha', 'desc-class' => '', 'link' => '/contact-form-1-popover.php', 'class' => 'contact-form popover-form has-captcha has-checkbox has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail' ), array( 'title' => 'Contact Form 2', 'desc' => 'Vertical contact form with captcha', 'desc-class' => '', 'link' => '/contact-form-2.php', 'class' => 'contact-form has-captcha has-checkbox has-validation has-intl-tel-input', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-address-book' ), array( 'title' => 'Contact Form 3', 'desc' => 'Contact form with rich text editor & dependent field', 'desc-class' => ' class="small"', 'link' => '/contact-form-3.php', 'class' => 'contact-form has-dependent-fields has-select has-tinymce has-checkbox has-intl-tel-input has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-phone' ), array( 'title' => 'Car Rental Form', 'desc' => 'Step form with accordion & step validation', 'desc-class' => ' class="small"', 'link' => '/car-rental-form.php', 'class' => 'order-rental step accordion has-checkbox has-picker has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-car' ), array( 'title' => 'Custom Radio/Checkbox Form', 'desc' => 'With Custom CSS plugin', 'desc-class' => ' class="small"', 'link' => '/custom-radio-checkbox-css-form.php', 'class' => 'has-checkbox', 'frameworks' => array('bootstrap3', 'bootstrap4', 'foundation'), 'icon' => 'icon-check-square-o' ), array( 'title' => 'Switches Radio/Checkbox Form', 'desc' => 'On/Off with LC-Switch plugin', 'desc-class' => ' class="small"', 'link' => '/switches-form.php', 'class' => 'has-checkbox', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-toggle-on' ), array( 'title' => 'Customer Feedback Form', 'desc' => '2 columns
Feedback Form
with multiselect', 'desc-class' => ' class="small"', 'link' => '/customer-feedback-form.php', 'class' => 'survey has-select has-checkbox has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-comments' ), array( 'title' => 'Customer Satisfaction Step Form', 'desc' => 'Ajax step form with sliding transitions', 'desc-class' => '', 'link' => '/customer-satisfaction-step-form.php', 'class' => 'survey step ajax has-select has-checkbox', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-chart' ), array( 'title' => 'Customer Support Form', 'desc' => 'Ajax step form with sliding transitions', 'desc-class' => '', 'link' => '/customer-support-form.php', 'class' => 'ajax contact-form has-select has-checkbox has-dependent-fields has-file-upload has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-lifebuoy' ), array( 'title' => 'CV Submission Form', 'desc' => 'Horizontal form with rich text editor & file upload', 'desc-class' => ' class="small"', 'link' => '/cv-submission-form.php', 'class' => 'has-file-upload has-tinymce has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-profile' ), array( 'title' => 'Dependent fields Form', 'desc' => 'Form with several conditional fields', 'desc-class' => ' class="small"', 'link' => '/dependent-fields.php', 'class' => 'has-dependent-fields has-select has-validation has-captcha has-checkbox', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-tree' ), array( 'title' => 'Send customized Emails', 'desc' => 'Contact form with styled emails', 'desc-class' => ' class="small"', 'link' => '/email-styles.php', 'class' => 'contact-form has-select has-captcha has-checkbox has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-mail-read' ), array( 'title' => 'File Upload Test Form', 'desc' => '3 File upload forms for files|images|images + captions', 'desc-class' => ' class="small"', 'link' => '/fileupload-test-form.php', 'class' => 'has-file-upload', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-upload' ), array( 'title' => 'Values from database', 'desc' => 'Retrieve default values from database', 'desc-class' => '', 'link' => '/default-db-values-form.php', 'class' => 'prefilled-form has-checkbox has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-database' ), array( 'title' => 'Dynamic fields Form 1', 'desc' => 'Horizontal form with dynalic fields', 'desc-class' => '', 'link' => '/dynamic-fields-form-1.php', 'class' => 'dynamic-fields ajax has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-dynamic' ), array( 'title' => 'Dynamic fields Form 2', 'desc' => 'Horizontal form with dynalic fields', 'desc-class' => '', 'link' => '/dynamic-fields-form-2.php', 'class' => 'dynamic-fields ajax has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-spinner4' ), array( 'title' => 'Employment Application Form', 'desc' => 'Horizontal form with Image upload', 'desc-class' => '', 'link' => '/employment-application-form.php', 'class' => 'has-file-upload has-checkbox has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-profile' ), array( 'title' => 'Image Picker Form', 'desc' => 'Replace Select Element with Image Picker', 'desc-class' => '', 'link' => '/image-picker-form.php', 'class' => 'has-select has-image-picker', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-images' ), array( 'title' => 'Input with Addons', 'desc' => 'Input & Select with Icon, Button & Text addons', 'desc-class' => '', 'link' => '/input-with-addons.php', 'class' => 'has-select has-picker has-select', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap'), 'icon' => 'icon-glass' ), array( 'title' => 'License agreement form', 'desc' => 'License agreement form with signature pad', 'desc-class' => '', 'link' => '/license-agreement.php', 'class' => 'license-form has-signature', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-pencil2' ), array( 'title' => 'Join Us Form', 'desc' => 'Horizontal
suscribe form', 'desc-class' => '', 'link' => '/join-us-form.php', 'class' => 'sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-user-plus' ), array( 'title' => 'Join Us Form Modal', 'desc' => 'Horizontal suscribe Modal form', 'desc-class' => '', 'link' => '/join-us-form-modal.php', 'class' => 'modal-form sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-user-plus' ), array( 'title' => 'Join Us Form Popover', 'desc' => 'Horizontal suscribe Popover form', 'desc-class' => '', 'link' => '/join-us-form-popover.php', 'class' => 'sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-user-plus' ), array( 'title' => 'Newsletter Suscribe Form', 'desc' => 'Horizontal Newsletter suscribe form', 'desc-class' => ' class="small"', 'link' => '/newsletter-suscribe-form.php', 'class' => 'sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-newspaper' ), array( 'title' => 'Order Form', 'desc' => 'Order Form with Payment Method
& Country select', 'desc-class' => ' class="small"', 'link' => '/order-form.php', 'class' => 'order-rental has-dependent-fields has-country-select has-checkbox has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-cart' ), array( 'title' => 'Booking Form', 'desc' => 'Booking Form date & time pickers, icon select list', 'desc-class' => ' class="small"', 'link' => '/booking-form.php', 'class' => 'reservation-booking has-dependent-fields has-picker has-select has-intl-tel-input has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-food' ), array( 'title' => 'Room Booking Form', 'desc' => 'Booking Form
Date Picker,
Rich Text Editor', 'desc-class' => ' class="small"', 'link' => '/room-booking-form.php', 'class' => 'reservation-booking has-tinymce has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-bed' ), array( 'title' => 'Search Form', 'desc' => 'Search Form with 2 Autocomplete - 2nd with ajax search', 'desc-class' => ' class="small"', 'link' => '/search-form.php', 'class' => 'search has-autocomplete ajax', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-search' ), array( 'title' => 'Sign Up Form', 'desc' => 'Vertical Form
password generator & validation', 'desc-class' => ' class="small"', 'link' => '/sign-up-form.php', 'class' => 'sign-in has-password has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-key' ), array( 'title' => 'Sign Up Form Modal', 'desc' => 'Vertical Form Modal password generator', 'desc-class' => ' class="small"', 'link' => '/sign-up-form-modal.php', 'class' => 'modal-form sign-in has-password has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-key' ), array( 'title' => 'Sign Up Form Popover', 'desc' => 'Vertical Form
password generator & validation', 'desc-class' => ' class="small"', 'link' => '/sign-up-form-popover.php', 'class' => 'popover-form sign-in has-password has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-key' ), array( 'title' => 'Simple Step Form', 'desc' => 'Simple Step Form with step validation', 'desc-class' => '', 'link' => '/simple-step-form.php', 'class' => 'step has-checkbox has-select has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-rocket' ), array( 'title' => 'Special Offer Sign Up', 'desc' => 'Simple Vertical
Sign Up Form', 'desc-class' => '', 'link' => '/special-offer-sign-up.php', 'class' => 'sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-gift' ), array( 'title' => 'Multiple modal forms on same page', 'desc' => 'Multiple modal forms
on same page', 'desc-class' => '', 'link' => '/multiple-modals.php', 'class' => 'sign-in contact-form modal-form has-password has-captcha has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-stack' ), array( 'title' => 'Multiple popover forms on same page', 'desc' => 'Multiple popover forms
on same page', 'desc-class' => '', 'link' => '/multiple-popovers.php', 'class' => 'sign-in contact-form popover-form has-password has-captcha has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-stack' ), array( 'title' => 'Post with Ajax Form', 'desc' => 'Horizontal suscribe Popover form', 'desc-class' => '', 'link' => '/post-with-ajax-form.php', 'class' => 'ajax sign-in has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-newspaper ' ), array( 'title' => 'Date range picker examples', 'desc' => 'Date range picker examples', 'desc-class' => '', 'link' => '/date-range-picker-form.php', 'class' => 'has-picker', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-calendar' ), array( 'title' => 'jQuery validation examples', 'desc' => 'jQuery validation examples', 'desc-class' => '', 'link' => '/validation-with-jquery-example-form.php', 'class' => 'has-validation', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-check-square-o' ), array( 'title' => 'jQuery tooltip examples', 'desc' => 'jQuery tooltip examples', 'desc-class' => '', 'link' => '/tooltip-form.php', 'class' => 'has-tooltip has-checkbox', 'frameworks' => array('bootstrap3', 'bootstrap4', 'material', 'material-bootstrap', 'foundation'), 'icon' => 'icon-comments' ) ); $list = ''; $forms = array(); $forms_base_props = array( array( 'framework' => 'bootstrap3', 'class' => 'bootstrap-3 active ' . $bs3_on . ' ', 'link' => 'bootstrap-3-forms', 'card-class' => 'primary', 'badge-text' => 'Bootstrap 3' ), array( 'framework' => 'bootstrap4', 'class' => 'bootstrap-4 active ' . $bs4_on . ' ', 'link' => 'bootstrap-4-forms', 'card-class' => 'indigo', 'badge-text' => 'Bootstrap 4' ), array( 'framework' => 'material', 'class' => 'material active ' . $material_on . ' ', 'link' => 'material-forms', 'card-class' => 'success', 'badge-text' => 'Material' ), array( 'framework' => 'material-bootstrap', 'class' => 'material-bootstrap active ' . $material_bootstrap_on . ' ', 'link' => 'material-bootstrap-forms', 'card-class' => 'pink', 'badge-text' => 'Material
Bootstrap' ), array( 'framework' => 'foundation', 'class' => 'foundation active ' . $foundation_on . ' ', 'link' => 'foundation-forms', 'card-class' => 'info', 'badge-text' => 'Foundation' ) ); foreach ($forms_base as $form) { foreach ($forms_base_props as $base_prop) { if (in_array($base_prop['framework'], $form['frameworks'])) { $list .= '
' . "\n"; $list .= '
'; $list .= ' ' . "\n"; $list .= '

' . $form['title'] . '' . $base_prop['badge-text'] . '

' . "\n"; $list .= ' ' . "\n"; $list .= '
' . "\n"; $list .= '
' . "\n"; } } } include_once '../phpformbuilder/Form.php'; $toggle_templates = new Form('toggle-templates', 'vertical', '', 'material'); $toggle_templates->useLoadJs('core'); $toggle_templates->addPlugin('materialize', '#toggle-templates'); /* bootstrap 3 bootstrap 4 material material bootstrap foundation accordion ajax contact-form modal-form order-rental popover-form prefilled-form reservation-booking search sign-in step survey has-autocomplete has-captcha has-checkbox has-country-select has-dependent-fields has-file-upload has-image-picker has-password has-picker has-select has-signature has-tinymce has-tooltip has-validation */ $toggle_templates->startFieldset('Frameworks'); $toggle_templates->addRadio('templates-framework', 'Bootstrap 3', 'bootstrap-3', $bs3_checked); $toggle_templates->addRadio('templates-framework', 'Bootstrap 4', 'bootstrap-4', $bs4_checked); $toggle_templates->addRadio('templates-framework', 'Material Design', 'material', $material_checked); $toggle_templates->addRadio('templates-framework', 'Material Bootstrap', 'material-bootstrap', $material_bootstrap_checked); $toggle_templates->addRadio('templates-framework', 'Foundation', 'foundation', $foundation_checked); $toggle_templates->printRadioGroup('templates-framework', '', false); $toggle_templates->endFieldset(); $toggle_templates->startFieldset('Forms'); $toggle_templates->addCheckbox('templates-chk', 'Accordion', 'accordion', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Ajax', 'ajax', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Contact', 'contact-form', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Dynamic Fields', 'dynamic-fields', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Loaded with Loadjs', 'loadjs', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'License agreement', 'license-form', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Modal', 'modal-form', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Order / Rental', 'order-rental', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Prefilled from Db', 'prefilled-form', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Popover', 'popover-form', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Reservation / Booking', 'reservation-booking', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Search Form', 'search', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Sign-in', 'sign-in', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Step Form', 'step', 'checked=checked'); $toggle_templates->addCheckbox('templates-chk', 'Survey', 'survey', 'checked=checked'); $toggle_templates->printCheckboxGroup('templates-chk', '', false); $toggle_templates->endFieldset(); $toggle_templates->startFieldset('Plugins'); $toggle_templates->addCheckbox('plugins-chk', 'Autocomplete', 'has-autocomplete', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Captcha', 'has-captcha', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Checkbox & radio buttons', 'has-checkbox', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Country Select', 'has-country-select', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Dependent Fields', 'has-dependent-fields', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'File Upload', 'has-file-upload', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Image Picker', 'has-image-picker', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Intl Tel Input', 'has-intl-tel-input', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Password', 'has-password', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Pickers', 'has-picker', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Select', 'has-select', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Signature pad', 'has-signature', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Text editor (tinyMce)', 'has-tinymce', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Tooltip', 'has-tooltip', 'checked=checked'); $toggle_templates->addCheckbox('plugins-chk', 'Validation', 'has-validation', 'checked=checked'); $toggle_templates->printCheckboxGroup('plugins-chk', '', false); $toggle_templates->endFieldset(); ?> Bootstrap 3/4, Material Design and Foundation Form Templates printIncludes('css'); ?>

Forms Templates

- Use left nav checkboxes to filter list

printIncludes('js'); ?>