Creating a Form (Form Builder)

Creating a Form (Form Builder)

The form builder is a visual, drag-and-drop interface for designing custom forms. You can add fields, configure validation, arrange multi-page layouts, and preview the result in real time — all without any coding.

Getting Started

Navigate to Forms → Create to open a blank form in the builder. Alternatively, duplicate an existing form from the form list to start with a pre-populated template.

Form Details

Before adding fields, configure the basic form properties at the top of the builder:

• Form Name — a descriptive title displayed to submitters (e.g. "Equipment Hire Enquiry")
• Slug — auto-generated from the form name; used in the public URL. You may edit the slug before publishing to create a cleaner or shorter URL.
• Description — optional introductory text shown at the top of the form to provide context or instructions to submitters

The Builder Interface

The builder is divided into two areas:

• Field Type Selector (left panel) — a palette of 20+ field types grouped by category. Click or drag any field type to add it to your form.
• Form Canvas (centre) — the main design area where your fields are arranged. Fields appear in the order they will be presented to submitters.

Adding Fields

1. Browse the field type selector on the left and locate the field you need.
2. Click the field type to append it to the bottom of the canvas, or drag it to a specific position.
3. The field appears on the canvas with default settings, ready for configuration.

Configuring a Field

Click any field on the canvas to open its configuration panel. Every field supports the following options:

Option	Description
Label	The text displayed above the field, describing what information is requested.
Placeholder	Greyed-out hint text inside the field, shown before the submitter types.
Help Text	Supplementary guidance displayed below the field.
Required	Toggle on to make the field mandatory. The form cannot be submitted if this field is empty.
Default Value	Pre-fill the field with a value that submitters can change or accept.
Validation Rules	Additional constraints such as minimum/maximum length, number range, or pattern matching.

Multi-Page Forms

For longer forms, insert page breaks to split the form into multiple pages. Submitters will see pagination controls (Next / Previous) and a progress indicator. Each page is validated independently before advancing, so errors are caught early.

• Add a page break by clicking Add Page Break in the field type selector.
• Drag the page break to the position where you want the page to end.
• There is no limit to the number of pages, but shorter forms tend to achieve higher completion rates.

Reordering, Duplicating, and Deleting Fields

• Reorder — drag any field up or down on the canvas to change its position.
• Duplicate — click the duplicate icon on a field to create an identical copy directly below it.
• Delete — click the delete icon to remove a field. This action cannot be undone once the form is saved.

Real-Time Preview

Click the Preview button at any time to see the form exactly as submitters will experience it. The preview opens in a separate panel and updates live as you make changes. Use preview mode to verify field layout, conditional logic behaviour, and multi-page navigation.

Saving as Draft

Click Save to store your progress without publishing. Draft forms are only visible to administrators and are not accessible via the public URL. You can return to a draft form at any time to continue editing.

Form Schema Storage

The form structure is stored as structured JSON in the form_schema column. This includes all field definitions, ordering, page breaks, conditional rules, and validation constraints. The schema is versioned so that submissions always reference the form definition that was active at the time of submission.

Tips for Effective Form Design

• Keep forms as short as possible — fewer fields lead to higher completion rates.
• Use conditional logic to hide fields that are not relevant, reducing visual clutter.
• Place the most important fields on the first page to capture essential data early.
• Test your form thoroughly in preview mode before publishing, especially conditional logic and validation.
• Use clear, descriptive labels and add help text for any field that may cause confusion.