Builder workspace
Navigate the Form Builder editor—outline, canvas, palette, and previews.
Video coming soon
Builder workspace
id: academy-builder-workspace · ~2–4 min
Audience: Admin
The Form Builder editor is a three-panel workspace plus a top toolbar. Understanding each area helps you build faster and catch layout issues before mobile rollout.
Editor layout
Outline (left)
The outline lists every field on the current page in order. Use it to:
- Jump to a field without scrolling the canvas
- Search fields by label
- Drag fields to reorder within a page
- See field type at a glance
Pages appear as tabs in the outline. Switch pages to edit multi-step forms.
Canvas (center)
The canvas is the live form layout. Drag fields from the palette onto the canvas, or click a palette item to append it at the end. Selected fields show edit handles and quick actions.
Half-width fields sit side by side on desktop; they stack on narrow viewports and on mobile.
Palette (left, below outline)
The palette groups available field types:
- Structure — Header, FieldSet
- Basics — Text Box, Number, Text Area, Date Picker, Paragraph
- Selection — Checkboxes, Radio Buttons
- Advanced — List, Formula
- Media — Image, Signature
Drag a chip onto the canvas or click to add.
Property panel (right)
When a field is selected, the property panel shows its label, internal key, help text, width, required flag, and type-specific options. Changes apply immediately on the canvas.
Preview modes
Use the view switcher above the canvas to validate the form from different angles:
| Mode | Purpose |
|---|---|
| Desktop | Default editing view; multi-column layout |
| Mobile | Phone-frame preview of stacked layout |
| Printable output, page breaks, approval copy | |
| JSON | Raw definition for developers; edit and apply with care |
Always check Mobile before saving production forms.
Reordering and pages
- Reorder on canvas — drag fields within a row or to another row.
- Reorder in outline — drag list items up or down.
- Pages — use Add page on the canvas toolbar. Move or copy fields between pages from field actions.
- Remove page — fields move to page 1; confirm before deleting.
Save
Click Save in the toolbar when the form is ready. Chekku confirms that saving publishes the latest definition to the app. Unsaved edits show an edit counter; navigate away and you will be asked to discard or stay.
The Settings tab (separate from the Editor) holds form name, notifications, and visit-type rules—configure those before your first save when possible.
Tips
- Keep the outline open on long forms—it is faster than scrolling.
- Use Mobile preview after changing column widths or adding pages.
- PDF preview catches awkward page breaks before field users print copies.
- Save after major restructuring so you can use edit history if needed.