Interface Builder

Appearance

How to Create a Form ​

Type: How-to | Audience: End-user | Goal: Set up a form structure on the canvas

Add the Form ​

  1. Hover the gap between two rows on the canvas (or above the first row). A small + button appears.
  2. Click + to open the Add row dialog.
  3. Pick Form from the layout list.

Add row dialog open on top of the empty canvas. The dialog lists six layout options stacked vertically: Full width, Two columns, Three columns, Sidebar left, Sidebar right, and Form. The Form option is at the bottom of the list and is highlighted with a hover state, showing its label and the description 'Form container for input fields'.

The dialog closes and two new marker rows appear on the canvas:

  • Form Start — marks the beginning of the form (shown with a left-edge accent and a row label).
  • Form End — marks the end of the form (shown with a left-edge accent and a row label).

Builder canvas after adding a form. A blue 'Form Start · Row 1' marker sits at the top with a left-edge accent and a default identifier badge ('Form e592'). A matching 'Form End · Row 2' marker sits below. Between the two markers the empty form area shows the 'Action required: Missing input field' warning card. The Form Settings tab is open in the right sidebar.

The Form option is hidden in the Add row dialog when you are already inside a form — forms cannot be nested.

Set the Form Identifier ​

  1. Click either the Form Start or Form End row to open the Form Settings tab in the sidebar.
  2. Enter a unique name in the Form Identifier field — for example, contact-form.
  3. The identifier appears as a badge next to Form Start on the canvas and is used by Submit and Reset buttons to target this form.

Form Settings tab open in the right sidebar with the Form Identifier field set to 'contact-form'. Below it are Padding Top, Padding Bottom, Padding Left, and Padding Right inputs (all 0 px). On the canvas, the Form Start row now shows the 'contact-form' identifier as a badge next to the row label.

Adjust Form Padding (Optional) ​

In the Form Settings tab you can set inner padding for the rendered form:

  • Padding Top (px)
  • Padding Bottom (px)
  • Padding Left (px)
  • Padding Right (px)

Add Rows Inside the Form ​

Hover the area between the Form Start and Form End markers, then click the + button that appears to open Add row. Pick any layout (Full, Two Column, etc.) — note that the Form option is hidden inside an existing form. Rows added in this area become part of the form.

Place Input Fields ​

Click an empty column inside the form to open Add block, then pick Input. The dialog only allows the Input block when the surrounding row is inside a form. For details on input types and settings, see Input Field Types.

Validation Warnings ​

While you build, the canvas highlights warnings when the form is incomplete. Each warning includes a quick action button to fix the problem:

  • Missing input field — the form has no input blocks between Form Start and Form End. Add at least one Input block.
  • Missing submit button — no button anywhere in the view targets this form's Form Identifier. Add a Button block, set its Button Type to Form Submit Button, and pick this form from the Form dropdown.

Close-up of the 'Missing input field' warning card displayed inside an empty form on the canvas. The card has a yellow dashed border, a document-with-arrow icon at the top, an 'ACTION REQUIRED' label, the heading 'Missing input field', the description 'Your form needs at least one input field for users to enter data.', and an 'Add input' quick-action button.