Drag & drop Form Builder
The easiest way to create professional web forms

Instructions for use Tutorial in images
Drop components here to build your form

Instructions for use

Overview
Create your form in 3 easy steps

  1. 1Add components
  2. 2Configure your form
  3. 3Get the code

This online Drag & drop Form Builder is suitable for any type of use.

You can create your forms with the online tool as well as from your PHP Form Builder local copy.

To open your local Drag and drop form builder, open drag-n-drop-form-builder/index.html from your local server.

Create and configure your forms by simple drag and drop.
The generated forms can be easily integrated into any HTML or PHP page.

Any type of integration is possible whatever the CMS or Framework used: Wordpress, Joomla, Drupal, Prestashop, Bootstrap, Material Design, Foundation, ...

Creating your forms with this online drag-and-drop form builder does not require any knowledge. Its use is simple and intuitive, this is the easiest way to generate any Web form.

Nevertheless here are some explanations:


Adding and configuring fields and HTML content

Drag the components from the left panel to the center panel.

Click a component in the center panel to display its properties in the right panel.

The right panel allows you to choose the properties of the selected item: field name, default value, placeholder, is it a required field or not, etc...

The available options are different depending on the selected component. For example, you can add and configure the options of a select dropdown, add and configure radio buttons or checkboxes.

The right panel is generally divided into two or three tabs - one of which is used to add Javascript Plugins.

Different Javascript Plugins are available, again depending on the component chosen. Each plugin provides its own configuration options.


Main Settings

Here you have access to the form parameters: name, framework used (Bootstrap 3/4, Material Design, ...), layout, ... etc.

The "Form Action" tab lets you define the parameters for sending an email, saving the values in your database, and possibly a redirection.

The "Form Plugins" tab is where you can configure Javascript Plugins enabled at the form level. Mainly Checkbox and Radio Buttons plugins.

The "Ajax loading" tab allows you to enable the loading of the form in Ajax. This is particularly useful if you want to insert your form in an HTML page (which does not accept PHP).
In this case, the HTML page will call the form in Ajax. The PHP form is saved in a separate file.


Preview

The preview button enables you to open a modal at any time and see what your form looks like.

The plugins are activated in the preview window.


Get Code

Click to build the form and retrieve the code. It's easy: just copy and paste following the instructions and your form is ready.


Advanced features

The online drag-and-drop form builder is designed to easily create your forms.

PHP Form Builder offers many advanced features, some of which are not available in drag-and-drop.

Once your form is generated, you can easily use PHP Form Builder functions to customize any field and add more advanced features.


Tutorial in images