Form Builder
The visual builder for creating and editing forms. Drag fields onto a canvas, configure them in the right sidebar, and use AI Assist to generate content. This guide covers the UI. For the programmatic MCP API, see Forms: Getting Started.
Creating a Form
There are two ways to start a new form:
From an AI prompt (org overview)
On the organization overview screen, enter a description of the form you want in the AI prompt box (e.g. "A customer feedback survey with a rating and open comment field"). The AI generates a complete form with fields, which you can then refine in the builder.
Manually from the Forms list
Open the Forms list for your organization and click New Form. A blank form opens in the builder with one page and one section. Add fields by dragging them from the left palette.
Builder Layout
The builder is split into three regions:
- Page tabs (top): One tab per form page. Click a tab to switch pages, or use the
+button to add a new page. - Left sidebar: field palette: A catalog of field types (text, email, select, checkbox, etc.). Drag a field from here onto the canvas.
- Center: canvas: The form being edited, rendered as sections containing fields. This is where you drag, drop, and reorder.
- Right sidebar: Context-sensitive. When no field is selected, it shows AI Assist, a chat interface for generating and improving fields. When a field is selected, it shows that field's configuration.
Drag and Drop
Add a field to a section
Drag a field type from the left palette and drop it onto a section in the canvas. The field is appended to that section and automatically selected, opening its config in the right sidebar.
Reorder fields within a section
Drag a field by its handle and drop it above or below another field in the same section. A drop indicator shows where the field will land.
Move a field between sections
Drag the field over a different section. The target section highlights as you hover, and the field moves there on drop.
Multi-Page Forms
A form can have multiple pages, each shown as a tab at the top of the canvas. Users proceed through pages in order when filling out the form.
- Click the
+button next to the page tabs to add a new page. - Click a page tab to switch the canvas to that page. Each page has its own sections and fields.
- Pages can be renamed and reordered from the tab context menu.
Sections
Sections group related fields within a page. Every page starts with one section. Use Add Section on the canvas to create more. Sections help break long forms into visually distinct groups (e.g. "Contact details" and "Preferences").
Field Configuration
Click any field on the canvas to open its configuration in the right sidebar. Common options:
- Label: The question or prompt shown above the input.
- Placeholder: Helper text inside the input.
- Required: Toggle whether the field must be filled.
- Validation: Rules such as min/max length, pattern, or value range, depending on field type.
- Config options: Type-specific settings, e.g. choices for a select field, or whether a checkbox allows "other".
Click away from the field (or press Esc) to return to AI Assist in the right sidebar.
AI Assist
The right sidebar hosts an AI Assist chat interface, available when no field is selected. Use it to:
- Generate fields: Describe what you need (e.g. "Add fields for collecting shipping address") and the AI inserts the fields onto the current page.
- Improve existing fields: Ask it to refine labels, add helpful placeholders, or tighten validation on fields already on the canvas.
- Generate options: For select or checkbox fields, ask the AI to produce a list of choices (e.g. "Give me 5 common job titles for this select field").
Preview Mode
Toggle Preview in the builder toolbar to render the form exactly as respondents will see it. Inputs are interactive so you can test validation and the multi-page flow. Toggle back to return to editing.
Version History
Every save creates a version. Open Version History from the builder toolbar to browse previous versions, preview any of them, and restore one if needed. Restoring replaces the current draft with the selected version.
Auto-Save
Changes sync to the backend automatically as you edit. A save indicator in the toolbar shows the current sync status. There is no separate save button; once the indicator shows "saved", your work is persisted.