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

Instructions for use Tutorial in images

Disk

Load from disk Save on disk

Server

Load from server Save on server
Preview Get code
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.

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

Drag & drop the form elements from the left panel to create the fieldsDrag & drop the form elements from the left panel to create the fields Click any component in the main panel to view & live-edit its settings in the Component Settings panelClick any component in the main panel to view & live-edit its settings in the Component Settings panel Add / Edit / Remove Radio buttons or Checkboxes from the Component Settings panelAdd / Edit / Remove Radio buttons or Checkboxes from the Component Settings panel Drag & drop the 'Start/End Condition' from the left panel to add conditional logicDrag & drop the 'Start/End Condition' from the left panel to add conditional logic Choose conditions under which the fields will be displayed or hiddenChoose conditions under which the fields will be displayed or hidden Enable and configure each plugin from the Component Settings panelEnable and configure each plugin from the Component Settings panel Drag & drop to add & customize Title (h1-h6), Paragraph or custom HTMLDrag & drop to add & customize Title (h1-h6), Paragraph or custom HTML Different plugins are available depending on the selected field typeDifferent plugins are available depending on the selected field type Different options are available depending on the selected pluginDifferent options are available depending on the selected plugin Drag and drop the elements to reorder them at any timeDrag and drop the elements to reorder them at any time Click the 'preview' button for a live preview at any timeClick the 'preview' button for a live preview at any time Plugins and all features are available during previewingPlugins and all features are available during previewing Click the 'Main Settings' button to choose your preferred framework & others various settingsClick the 'Main Settings' button to choose your preferred framework & others various settings Enable loading with Ajax if you want to - it allows to load your form in any HTML page without PHPEnable loading with Ajax if you want to - it allows to load your form in any HTML page without PHP Configure the sending of posted data by email or saving in your databaseConfigure the sending of posted data by email or saving in your database Setting up email sendingSetting up email sending Some plugins are available in the global configuration of the formSome plugins are available in the global configuration of the form Click the 'Get Code' button, copy/paste in your pageClick the 'Get Code' button, copy/paste in your page The complete page code is also availableThe complete page code is also available Load / Save your forms in JSON format at any timeLoad / Save your forms in JSON format at any time