Form builder

The form builder is where you design the structure of your form. It has two main areas:

• Field palette (left) — lists all available field types and containers. Click any item to add it, or drag it onto the canvas.
• Canvas (centre) — shows all blocks in order. Drag the grip handle on the left of any block to reorder it.

Editing the form title and description

The form title and description are editable directly in the builder header — click on either text to start typing. Both are saved when you click Save.

Builder / JSON toggle

The header contains a Builder / JSON toggle. Switch to JSON to view and edit the complete form definition as a JSON document. The JSON includes all form metadata (title, description, visibility, expiresAt, status) and every field inline. Click Apply JSON to push your edits back to the canvas, then Save to persist them.

The JSON follows this flat structure:

{
  "title":       string,
  "description": string | null,
  "visibility":  "PUBLIC" | "PRIVATE",
  "status":      "DRAFT" | "PUBLISHED",    // read-only
  "expiresAt":   ISO 8601 string | null,
  "fields": [
    // plain field
    { "id": string, "type": FieldType, "label": string, "order": number, ... },
    // side-by-side row
    { "id": string, "type": "ROWS", "label": string, "order": number,
      "rows": [ { "type": FieldType, "label": string, ... } ] },
    // repeating group
    { "id": string, "type": "GROUP", "label": string, "repeatable": boolean,
      "order": number,
      "fields": [ /* same structure, ROWS supported inside groups */ ] }
  ]
}

Adding a field

Click a field type in the palette to append it at the bottom of the canvas. If a row or group block is currently focused (its header is highlighted), the field is added inside it instead. You can also drag a field type from the palette and drop it anywhere on the canvas, into a row, or into a group.

Editing a field

Click the pencil icon on a field card to open the field editor in a modal. The editor exposes:

• Label — the question text shown to respondents. Required.
• Placeholder — hint text shown inside the input. Optional.
• Required — toggle on to prevent form submission unless this field is filled.

Choice fields (Multiple choice, Checkboxes, Dropdown) also show an Options editor where you can add, edit, and remove the selectable choices.

Row blocks

A Row places multiple fields side-by-side in a horizontal layout. Drag Row (2 col) from the palette onto the canvas to create one. You can have any number of fields in a row.

Add fields to a row in any of these ways:

• Click + Add field in the row header to open a field-type picker and select a type.
• Drag a field type from the palette and drop it inside the row.
• Click the row header to focus it, then click a type in the palette.

Fields inside a row can be reordered by dragging their grip handles horizontally.

Reordering blocks

Grab the grip handle (⠿) on the left of any block and drag it to the desired position. The new order is saved when you click Save.

Deleting a field or block

Click the trash icon on a top-level block to delete it. To delete a field inside a row or group, open the field editor modal and click Delete field.

Saving

Click Save in the top-right corner of the builder. Changes are not auto-saved — unsaved changes will be lost if you navigate away. Saving also persists any edits to the title or description.

Clicking Publish saves and publishes in one step, changing the form status from Draft to Published.

Repeating groups

Drag Group from the palette to add a repeating group. Add fields inside the group using the + icon in the group header, by dragging from the palette into the group, or by focusing the group and clicking the palette. Rows are also supported inside groups. See Repeating groups.