Using the Form Builder

When to use the Form Builder

The Form Builder is where you actually build the form — dragging fields onto a canvas, setting their labels, deciding which ones are required, and laying everything out the way you want it. You'll be in here whenever you want to:

• Build a new draft form from scratch
• Adjust the fields on a draft you started earlier
• Tweak a form you cloned from a template
• Edit a new draft version of an already-published form

Opening the builder

The builder opens automatically straight after you create a new form. To re-open it later:

1. 1

   Open the Forms list.

2. 2

   Find the draft form you want to edit.

3. 3

   Click the hammer icon, or click the actions menu and choose Open Form Builder.

What you'll see

The builder splits into three areas:

• Field palette on the left — every field type you can add, organised by category
• Canvas in the middle — your form, laid out in a grid as you build it
• Field config panel on the right — the settings for whichever field you've selected

A toolbar across the top has the form's name, a Preview toggle, and a Publish button.

Adding fields by drag and drop

The basic way to build a form is to drag fields from the palette onto the canvas.

1. 1

   Find the field type you want in the left palette. The palette is split into categories — basic inputs, selection fields, employee and project pickers, photos and signatures, and structural fields like repeating sections and page breaks. See the field type articles below for the full list.

2. 2

   Click and hold the field, then drag it onto the canvas. As you drag, drop zones light up to show where the field can land — empty spaces in the grid, between rows, or inside a repeating section.

3. 3

   Drop the field. It snaps into place and the right-hand config panel opens with its settings.

4. 4

   Fill in the label, helper text and any other settings you need. Changes save automatically as you type — there's no separate save button.

You can also click any existing field on the canvas to select it and edit its settings.

Moving fields around

To move a field, grab its drag handle and drop it somewhere else on the canvas. Fields can be moved:

• Side to side within the same row — to change the order on that row
• Up or down to a different row — to reshuffle sections
• Into a repeating section or group — to nest a field inside a container
• Out of a container — back to the main grid

The new position saves immediately, so refreshing the page won't lose your changes.

Laying things out in columns

The canvas uses a column-based grid so you can put short fields side by side instead of stacking everything down the page. The default layout is one, two or three columns wide.

• One column — single-column form, easiest to read on a phone
• Two columns — short fields can sit side by side (e.g. Date next to Inspector)
• Three columns — denser layouts for forms with lots of small fields

Some fields always take the full width regardless of column setting — long text, signatures, photos and repeating sections — because they need the space.

The field settings panel

Click any field on the canvas and the right-hand panel shows its settings. Most fields have the same core settings:

• Label — what the user sees above the field
• Helper text — a small description below the field, useful for instructions
• Placeholder — greyed-out hint text inside the field
• Default value — pre-fills the field when the form opens
• Required — tick to make the field mandatory before the form can be submitted
• Validation — minimum and maximum values for numbers, max length for text, and so on
• Conditional logic — see Showing fields only when needed
• Type-specific settings — for example, the list of choices on a dropdown, or the maximum number of photos for a photo field

Changes save as you type. There's no save button to remember.

Previewing the form

The Preview toggle at the top of the builder switches the canvas from edit mode to a live preview of how the form will look to the people filling it in. Preview mode:

• Hides the palette and the settings panel so you see the form full width
• Renders every field exactly as users will see it
• Validates each page on multi-page forms when you click Next
• Includes a test submit button — but the test submission isn't saved

This is the right tool for sanity-checking conditional logic and the overall flow before you publish. Toggle Preview off to go back to editing.

Publishing the form

When you're happy, click the Publish button at the top of the builder (or change the status from the Forms list). The form moves from Draft to Published and immediately becomes available for your team to fill in.

Real-world example

Here's how you might build a daily site inspection form from scratch:

1. 1

   Drop in Single-line text fields for Inspector name and Site location.

2. 2

   Drop in a Date field for the inspection date. Sit it next to the inspector's name in a two-column row.

3. 3

   Drop in a Dropdown for Weather conditions with options like Dry, Light rain, Heavy rain, Frost, and so on.

4. 4

   Drop in a Long text field for general observations.

5. 5

   Drop in a Photo field set to allow multiple uploads, for site condition shots.

6. 6

   Drop in a Repeating section for hazards, with fields inside for the hazard description, location and a photo.

7. 7

   Drop in a Signature field at the bottom for the inspector to sign off.

8. 8

   Toggle on Preview, fill in a test submission, then click Publish.

Next steps

• Adding basic fields — for text, numbers, dates and other simple inputs.
• Showing fields only when needed — for show/hide conditions.
• Splitting a form into pages — for breaking long forms up.
• Updating a published form — for making changes safely after publishing.