Quickstart Guide

Welcome to PHP Form Builder's Quickstart Guide

To get started with PHP Form Builder you have two entry points according to your preferred approach:

1. The Drag and drop form generator

Create your forms by dragging and dropping, then copy and paste the code into your page.

The Drag and drop method is the quickest & most straightforward way to build your forms.

2. The built-in PHP functions

Create your forms using the PHP functions provided for this purpose, simple, documented, and explained throughout this project.

Numerous templates and code examples, the function reference, and the class documentation are available to help you.

Extensions for IDE

Visual Studio CodeDownload the PHP Form Builder extension for Visual Studio Code

Visual Studio CodeDownload the PHP Form Builder plugin for Sublime Text

For PHP Beginners, a detailed step-by-step tutorial is available here: PHP Beginners Guide

Requirements

All you need is:

If you use an invalid hostname like localhost:3000, the solution is to create an alias.

Installation

Don't upload all the files and folders on your production server.

PHP Form Builder's package includes the Form Builder itself, the documentation, and the templates.

Documentation and Templates are available online at https://www.phpformbuilder.pro/.
There's no need to upload them on your production server.

In the same way, you can use the online Drag & Drop Form Builder

  1. Add the phpformbuilder folder at the root of your project.

    If you want to put the phpformbuilder folder inside a subfolder, please read this to avoid PHP errors or warnings.

    Your directory structure should be similar to this :

    Minimum required files

    • If you don't send emails, you can remove the mailer folder
    • You can remove all the plugins you don't use from the plugins and plugins-config folders
    • You can delete register.php after you have registered

    More details about folders, files, and required files on the production server are available here: ../#package-structure

  2. Registration

    Open phpformbuilder/register.php in your browser, and enter your purchase code to activate your copy.

    Each purchased license allows the installation of PHP Form Builder on two different domains:

    • One for localhost
    • One for your production server

    Once you register your purchase, delete register.php from your production server to avoid unwanted access.

  3. You're ready to go.

CMS users (Ajax loading)

If you use a CMS (WordPress, Drupal, Prestashop¨, or other),
the easiest and most efficient way to load your forms is with Ajax.

If you use Drag & Drop tool

  1. Build your form with the drag and drop tool
  2. Open the Main Settings, then click the Ajax loading tab and enable Ajax
  3. Close the modal
  4. Click the Get code button and follow the instructions

If you code your form

Refer to https://www.phpformbuilder.pro/documentation/class-doc.php#ajax-loading

How it works

You need 4 PHP blocks on your page :

  1. 1st block at the very beginning of your page to :
    • create your form
    • validate if posted
    • send emails, or record the values into your database if validated
  2. 2nd block just before </head> to include css files required by plugins
  3. 3rd between <body></body> to render your form
  4. 4th just before </body> to include js files & code required by plugins

Sample page code

<?php
/*============================================
=            1st block - the form            =
============================================*/

use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;

// Start the PHP session
session_start();

// Include the main Form class
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';

// Create the form
$form = new Form('test-form', 'horizontal', 'novalidate');

// Call functions to add fields and elements
$form->addInput('text', 'user-name', '', 'Name :', 'required, placeholder=Name');
$form->addRadio('is-all-ok', 'Yes', 1);
$form->addRadio('is-all-ok', 'No', 0);
$form->printRadioGroup('is-all-ok', 'Is all ok ?', false, 'required');
$form->addBtn('submit', 'submit-btn', 1, 'Send', 'class=btn btn-success');

// iCheck plugin
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square', '%color%' => 'red'));

/*===========  End of 1st block  ============*/
?>
<!DOCTYPE html>
<html>
<head>
<title>Test Form</title>

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<?php
/*============================================================
=            2nd block - css includes for plugins            =
============================================================*/

$form->printIncludes('css');

/*===================  End of 2nd block  ====================*/
?>
</head>
<body>
<h1>My first form</h1>
<?php
/*======================================================================================================
=            3rd block - render the form and the feedback message if the form has been sent            =
======================================================================================================*/

if (isset($sent_message)) {
    echo $sent_message;
}
$form->render();

/*========================================  End of 3rd block  =========================================*/
?>

<!-- Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<?php
/*========================================================================
=            4th block - js includes for plugins and js code (domready)  =
========================================================================*/

$form->printIncludes('js');
$form->printJsCode();

/*=========================  End of 4th block ===========================*/
?>
</body>
</html>

All functions and arguments to build your form, setup layout, add plugins are detailed in Class Documentation, and Functions Reference.

Validate the user's posted values and send emails

Add this PHP block just after include_once [...] . '/phpformbuilder/Form.php'; :

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

    // check for errors
    if ($validator->hasErrors()) {
        $_SESSION['errors']['test-form'] = $validator->getAllErrors();
    } else {
        $email_config = array(
            'sender_email'    => 'contact@my-site.com',
            'sender_name'     => 'PHP Form Builder',
            'recipient_email' => 'recipient-email@my-site.com',
            'subject'         => 'PHP Form Builder - Test form email',
            'filter_values'   => 'test-form'
        );
        $sent_message = Form::sendMail($email_config);
        Form::clear('test-form');
    }
}

Email sending may fail on your localhost, depending on your configuration.

It should work anyway on the production server.

Database recording

Jeff L. Williams's Mysql class is in the database folder.

You'll find all documentation and insert / edit / delete examples here : class-doc.php#database-main

Complete page code

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

// Start the PHP session
session_start();

// Include the main Form class
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';
if ($_SERVER["REQUEST_METHOD"] == "POST" && Form::testToken('test-form') === true) {
    // create validator & auto-validate required fields
    $validator = Form::validate('test-form');

    // check for errors
    if ($validator->hasErrors()) {
        $_SESSION['errors']['test-form'] = $validator->getAllErrors();
    } else {
        $email_config = array(
            'sender_email'    => 'contact@my-site.com',
            'sender_name'     => 'PHP Form Builder',
            'recipient_email' => 'recipient-email@my-site.com',
            'subject'         => 'PHP Form Builder - Test form email',
            'filter_values'   => 'test-form'
        );
        $sent_message = Form::sendMail($email_config);
        Form::clear('test-form');
    }
}

// Create the form
$form = new Form('test-form', 'horizontal', 'novalidate');

// Call functions to add fields and elements
$form->addInput('text', 'user-name', '', 'Name :', 'required, placeholder=Name');
$form->addRadio('is-all-ok', 'Yes', 1);
$form->addRadio('is-all-ok', 'No', 0);
$form->printRadioGroup('is-all-ok', 'Is all ok ?', false, 'required');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square', '%color%' => 'red'));
$form->addBtn('submit', 'submit-btn', 1, 'Send', 'class=btn btn-success');
?>
<!DOCTYPE html>
<html>
<head>
<title>Test Form</title>

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<?php $form->printIncludes('css'); ?>
</head>
<body>
<h1>My first form</h1>
<?php
if (isset($sent_message)) {
    echo $sent_message;
}
$form->render();
?>

<!-- Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<?php
$form->printIncludes('js');
$form->printJsCode();
?>
</body>
</html>

To go further

Now you've learned the basics; Several resources will help to add other fields, plugins, validate different values and build more complex layouts :