Form Builder Interface
A tour of the visual form builder — the palette, canvas, properties panel, and toolbar.
The form builder is divided into four main zones. Understanding each zone will help you work faster and more confidently.
Toolbar
The toolbar runs across the top of the builder and contains the following controls:
| Property | Type | Default | Description |
|---|---|---|---|
| Save | button | — | Saves the current form as a draft without publishing. |
| Publish | button | — | Saves and makes the form live with a public URL. |
| Preview | button | — | Opens the form in preview mode in a modal overlay. |
| Undo / Redo | buttons | — | Step backward or forward through your recent edits. |
| JSON Mode | toggle | off | Switch between the visual builder and the raw JSON editor. |
| Settings | button | — | Open form-level settings (name, description, category, language). |
Field Palette
The left panel lists all available field types organized into groups: Basic, Selection, Date & Media, and Advanced. You can search field types using the palette search box. Drag any field type onto the canvas or click it to append it.
Note: Advanced field types (Map, Table, Array, Calculated, Matrix) are marked with an "Advanced" badge and may require additional configuration.
Canvas
The canvas is the central area where your form takes shape. Each field is rendered as a draggable card showing a preview of the field. Click a field card to select it and open its properties. Drag the grip handle on the left of each card to reorder fields. Hover over a field card to reveal action buttons: Duplicate, Move Up/Down, and Delete.
Tip: Use the Step Section field to divide your form into multiple steps. Each step acts as its own page in the respondent's experience.
Properties Panel
The right panel shows all configurable options for the currently selected field. It is organized into tabs:
- General — label, name, required, placeholder, default value, description
- Validation — min/max length, pattern, custom error messages
- Logic — conditional visibility rules for this field
- Advanced — CSS class, hidden flag, disabled flag, field-specific options
JSON Mode
Toggle JSON Mode in the toolbar to switch to a full-screen code editor showing the raw form schema. Any changes you make in JSON mode are immediately reflected in the visual builder when you switch back. This mode is ideal for power users who want to copy-paste field configurations, bulk-edit properties, or integrate with external tooling.
[
{
"type": "text",
"label": "Full Name",
"name": "full_name",
"required": true,
"placeholder": "Enter your full name"
},
{
"type": "email",
"label": "Email Address",
"name": "email",
"required": true
}
]