Building Your Form
The form editor is where you design your form. This section explains every element type, every property, and how the canvas works.
The editor layout
The editor has three zones: a collapsible toolbar on the left, the canvas in the centre, and a properties panel on the right.
- 1 — Toolbar: collapsible element groups for adding items to the canvas
- 2 — Canvas: the white document area where you build your form
- 3 — Properties Panel: settings for the currently selected element
The toolbar — element groups
The toolbar is divided into three collapsible groups. Click a group header to expand or collapse it. In the editor, clicking an element adds it to the canvas.
Element types explained
- Heading
- Used for titles and section labels within your form. Headings create a navigable structure for screen reader users — they can jump between headings to orientate themselves within a long form. Use headings in order: H1 for the form title, H2 for sections, H3 for sub-sections. Never skip a level. The Accessibility Wizard will warn you if you do.
- Paragraph
- Used for instructional text, descriptions, and body copy. Supports rich text formatting: bold, italic, underline, bullet lists, and numbered lists. Use the formatting toolbar that appears above the element when editing.
- Image
- Used to insert logos, illustrations, or supporting visuals. Every image requires alt text — descriptive text that screen readers read aloud in place of the image. If an image is purely decorative (adds no information), mark it as decorative in the properties panel and it will be excluded from the PDF accessibility tree.
- Text Field
- A single-line input for short answers — names, email addresses, phone numbers. You can set a validation type (email, phone, number, or minimum length) which applies when the form is published as a web form.
- Text Area
- A multi-line input for longer answers — descriptions, comments, feedback. Supports minimum character length validation.
- Checkbox
- A yes/no toggle. Use for consent statements, agreements, or any binary choice. Always pair with a clear label.
- Radio Button
- A set of mutually exclusive options where the user picks exactly one. Add options in the properties panel. Use radio buttons rather than a dropdown when you have 5 or fewer options that benefit from being visible at once.
- Dropdown
- A select list for choosing one option from many. Better than radio buttons when you have 6 or more options, or when space is limited.
- Date Picker
- An input for collecting a date. In web forms, this renders as a native date picker. In exported PDFs, it renders as a text field with a date hint.
- Checklist
- A list of items each with its own checkbox. Use for task lists, assessment criteria, or multi-select options. Unlike a set of individual checkboxes, a checklist keeps related items grouped as a single element on the canvas.
- Rectangle
- A decorative shape. Use for backgrounds, dividers, or visual groupings. Rectangles sit behind all form elements on the canvas and in the exported PDF. They are marked as decorative Artifacts in the PDF structure tree and are invisible to screen readers.
- Ellipse
- A decorative circle or oval. Same behaviour as rectangle — purely decorative, marked as Artifact in PDF export.
- Line
- A decorative horizontal or diagonal line. Use as a visual separator. Also marked as Artifact in PDF export.
The properties panel
When you select an element, its properties appear in the right panel. The panel is divided into five collapsible sections. Click any section header to expand or collapse it.
Text Field
The human-readable label shown to users
The internal ID used in submission data and CSV exports. No spaces.
Label vs Field Name
The label is the human-readable text shown to users — “Full name”, “Date of birth”, etc. The field name is the internal identifier used as the column header in CSV exports and in submission data — “full_name”, “date_of_birth”, etc. The field name is set automatically when you type the label, but you can edit it. Use lowercase with underscores, no spaces.
Sensitive Data flag
When enabled, this field is excluded from AI analysis (FormGenius Analysis and Content Clarity). Use it for fields collecting information you would not want processed by an AI model — national insurance numbers, medical details, etc. This flag has no effect on the canvas, the exported PDF, or web form behaviour.
Working with the canvas
- Adding elements
- Click an element in the toolbar to add it to the current page. It appears near the centre of the canvas. New elements are placed 5mm below the lowest existing element to avoid stacking.
- Selecting elements
- Click an element to select it. Its resize handles appear. Hold Ctrl and click additional elements to select multiple. You can also drag a selection box (marquee) around a group of elements to select them all.
- Moving elements
- Drag a selected element to move it. Use the arrow keys for pixel-accurate movement. Hold Shift while pressing an arrow key to move in 1mm increments.
- Resizing elements
- Drag any corner handle to resize. For precise dimensions, set Width and Height in the Layout section of the properties panel.
- Undo and redo
- Ctrl+Z to undo, Ctrl+Shift+Z or Ctrl+Y to redo. Up to 50 undo steps are stored per session. Undo history is not saved — it resets when you close or reload the page.
- Pages
- Use the pages panel in the toolbar to add, reorder, or delete pages. The Accessibility Wizard checks headings and tab order across all pages.
- Shapes and layering
- Rectangle, ellipse, and line elements always render behind all other elements. This cannot be changed — it is by design to ensure decorative elements never obscure form content.
Saving your work
On paid tiers, your work saves automatically every 5 seconds. A status indicator in the editor header shows “Saved”, “Saving…”, or “Save failed”. Press Ctrl+S to save manually at any time.
On the free tier, your work is saved automatically to your browser’s local storage. It is not backed up to any server. If you clear your browsing data or switch browser, your forms will be lost.
Warning