The Form Builder is where you create, edit, and design your forms.

This guide explains every section of the interface so you know exactly where to go when building your form.

Overview of the Builder Layout

The Form Builder is divided into two main areas:

• Left Panel – Build and configure your form
• Right Panel – Live preview of your form

Everything updates in real time as you make changes.

The Left Panel

The left side of the builder is where you control your form’s structure and settings.

It contains several tabs:

• Structure
• Basic Fields
• Advanced Fields
• Field Settings
• Form Settings
• Email Preview

Let’s look at each one.

Structure Tab

The Structure tab shows all the fields currently added to your form.

Here you can:

• View all fields in order
• Reorder fields by dragging
• Click a field to edit its settings
• Delete fields

Think of this as the blueprint of your form.

If you want to change the order of fields, this is where you do it.

Basic Fields Tab

The Basic Fields tab contains commonly used fields such as:

• Text
• Email
• Textarea
• Dropdown
• Checkbox
• Radio Buttons

To add a field:

1. Click the field type.
2. It will appear in the Structure tab.
3. Click it to configure its settings.

These fields are perfect for most standard contact forms.

Advanced Fields Tab

The Advanced Fields tab includes more specialized fields.

Examples may include:

• File Upload
• Date Picker
• Phone
• Hidden Field
• HTML Block

Advanced fields are useful when your form needs more functionality beyond basic contact information.

Field Settings Tab

The Field Settings tab opens when you select a field from the Structure tab.

Here you can customize:

• Label
• Placeholder text
• Required option
• Default values
• Column layout
• Conditional Logic

Every field has its own settings.

To edit a field:

1. Click the field in Structure.
2. Switch to Field Settings.
3. Adjust the options.
4. Save your changes.

Form Settings Tab

The Form Settings tab controls settings that apply to the entire form.

Here you can configure:

• Form title and description
• Form width
• Submit button text
• Success message
• Email notifications
• Spam protection

If you want to change how the form behaves globally, use this tab.

Email Preview Tab

The Email Preview tab allows you to see how your notification emails will look.

You can:

• Review subject line
• Preview email body
• Confirm formatting

This helps ensure your notifications look professional before going live.

The Right Panel – Theme Preview

On the right side of the builder, you will see the Theme Preview panel.

This includes:

• Theme selector dropdown
• Live preview of your form

When you select a different theme, the preview updates instantly.

This allows you to:

• Test different designs
• Ensure readability
• Match your website branding

The preview reflects how the form will appear to visitors.

Live Preview

One of the most powerful features of the builder is live preview.

When you:

• Add a field
• Change a label
• Modify column width
• Switch themes

The preview updates immediately.

You can see changes before publishing.

Saving Your Form

Always click Save Form after making changes.

If you leave the page without saving, your latest edits may not be stored.

Quick Workflow Example

A typical workflow looks like this:

1. Add fields from Basic Fields.
2. Arrange them in Structure.
3. Customize each field in Field Settings.
4. Adjust form-wide options in Form Settings.
5. Choose a theme in the Preview panel.
6. Save.

Once saved, your form is ready to be added to a page.

What to Learn Next

Now that you understand the interface, you may want to explore:

• Creating multi-column layouts
• Using Conditional Logic
• Customizing email notifications
• Managing submissions