## 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](/docs/buttons/interface-button/interface-builder/how-to/forms/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.