Form Builder

Build your form using the drag-and-drop editor, add, configure and preview elements

Written By triploft

Last updated 8 days ago

Library › Forms › Form Builder

Builder Layout

The Form Builder is split into two areas: a left panel for choosing elements, and a main canvas where your form takes shape.

The Form Builder - Form Elements panel (left) and form canvas (right)

Left Panel - Form Elements

Lists all available elements grouped into four categories. Elements that are greyed out have already been added to the form. Each element has a ⋮⋮ drag handle and an ⓘ info icon.

Main Canvas - Form Details & Sections

The top of the canvas has Form Details (title and description shown to your client). Below that are the form sections built from the elements you add.

Adding Elements

Click any element in the left panel to instantly add it to the form, or drag and drop it into a specific position on the canvas. A confirmation toast appears when an element is successfully added.

Elements that have already been added are greyed out in the panel and cannot be added again, these element can only appear once per form.

'Basic Trip Details is added' - toast confirmation after clicking or dropping an element

The Four Element Categories

The left panel organises all elements into four distinct groups.

Category	What it collects
Travel Information	Trip-specific data: destination, dates, number of days, trip notes, budget, and travel preferences.
Contact Information	Personal details tied to the traveller: name, email, phone, address, birthday, passport, health info, loyalty programs, and more. Maps to the contact record.
Custom Questions	Open-ended and choice-based questions you define: short answer, long answer, dropdown, single/multi-select, file upload, and rating. Fully customisable.
General Elements	Supporting elements that aren't data fields: information blocks, e-signature, terms & conditions, and respondent details.

How Elements Behave

Once an element is placed on the canvas, it expands into an editable block. The behaviour is consistent across all element types:

• Help Text (Optional) - a hint shown to the client below the element label. Useful for adding context or instructions.

• Required toggle - a checkbox to mark the field as mandatory. Required fields show a red asterisk (*) on the form.

• Collapse/expand - click the ∧ icon in the element header to collapse a section and keep the canvas tidy.

• Delete - click the 🗑 trash icon to remove an element. The element becomes available again in the left panel.

• Reorder - use the ⋮⋮ drag handle on the left edge of an element to reorder it within the canvas.

Custom Question elements (like Multi Select Options) have additional fields - Question Text, answer options, and an option to allow free-text input. You can add as many answer options as needed.

Multi Select Options element - shows Question Text, Help Text, answer options, and Required toggle

General Elements like E-Signature include a signature pad and agreement checkbox. Terms & Conditions must be configured in Settings before being used on the form.

Preview

Click the Preview button (top right of the Form Builder) to see exactly what your client will see when they open the form link. The preview opens the live form view with all your current elements.

This is the same view your client gets , complete with your form title, cover image, traveler tab, and all sections. Use it to check field labels, required markers, and the overall flow before sharing.

Preview mode - the client-facing view of the form, opened from the Preview button

Changes are saved automatically as you build. The header shows 'Saved X seconds ago' so you always know your latest edits are preserved before previewing or sharing.