Skip to main content

Form Builder Basics

The form builder is where you design your form's structure, look, and behavior. Everything is organized in tabs along the top.

What you can do​

  • Build step-by-step form flows with a summary and result page.
  • Arrange rows and columns with drag and drop.
  • Copy steps, rows, and fields from other forms.
  • Set up logic, locks, styling, pricing, translations, and more.

Builder tabs​

Basic Settings​

Set the form title, description, and general behavior.

General:

  • Form type -- shown for reference, cannot be changed.
  • Title -- the name your customers see.
  • Description -- optional text shown at the top of the form.
  • Internal form -- toggle on to keep entry/contact forms internal. For Event Forms, internal-only behavior is controlled by the category: Team checklists are always internal and cannot be published or shared.
  • Category (Event Forms only) -- required before saving older Event Forms that do not have one yet. The category decides whether the form is shareable or internal-only.

Submit button:

  • Button alignment: left, center (default), or right.

Multi-step settings (only when your form has more than one step):

  • Show progress bar (default: on).
  • Show step numbers (default: on).
  • Show step labels (default: on).
  • Validate each step before the user can move to the next (default: on).

Builder​

The main workspace. Add steps, rows, columns, and fields here. This is where you build the actual form layout.

Conditional Logic​

Set up rules that show, hide, or change fields based on user input. See Form Builder Conditional Logic for the full guide.

Lock Policies (detail forms only)​

Manage which fields get locked and when. Only available in detail forms. To assign a lock policy to a field, open the field settings and select a lock policy from the dropdown -- it controls who can edit the field after submission.

  • Shows all fields that have an active lock policy.
  • Search and filter by field name.
  • A badge shows the total number of locked fields.
  • Each field shows its lock timing:
    • Locked immediately -- the field is always locked.
    • Locks after submission -- locks once the form is submitted.
    • Locks on a specific date or Locks X days before/after event start/end -- locks based on a deadline.

Styling​

Customize the look and feel of your form.

Quick actions:

  • Apply team styling -- loads your workspace defaults.
  • Reset -- restores all styles to factory defaults.
  • Live preview -- see changes in real time.
  • Device preview -- opens a preview for different screen sizes.

Theme: Pick a theme preset for a quick starting point.

Layout:

  • Field gap (space between fields, 0--100).
  • Padding (inner spacing, 0--100).
  • Max width.
  • Border radius (rounded corners).

Colors:

  • Primary color.
  • Text color.
  • Background color (with transparent option).
  • Input background color.
  • Border color.

Typography:

  • Font source: local fonts or Google Fonts.
  • Google font name (picked from a searchable dropdown, e.g. "Roboto", "Inter", "Poppins") when using Google Fonts.
  • Font family (when using local fonts).
  • Font weight (100--900).
  • Base font size (12--20 px).
  • Line height (1.0--2.0).

Field labels:

  • Custom label font size (12--24 px).
  • Custom label color.
  • Custom icon size (12--32 px).
  • Custom icon color.
  • Label formatting: bold, italic, underline.

CSS classes: Choose from available CSS class presets. Preset classes cover common layouts and spacing patterns so you do not need to write custom CSS for typical adjustments.

Custom CSS: Write your own CSS in the code editor with syntax highlighting.

Commerce & Tax​

Configure pricing, taxes, and view product/room overviews.

Settings:

  • Price display: net (excl. VAT) or gross (incl. VAT, default).
  • Show tax info (default: on).
  • Currency code (3-letter ISO code, default: EUR).
  • Rounding:
    • 0.01 -- standard (default).
    • 0.05 -- Swiss rounding.
    • 1.00 -- whole numbers.
  • Decimal separator: point or comma.
  • Thousands separator: comma, point, apostrophe, space, or none.
  • Tax rates table (read-only, shows name, rate, default status, and external ID).
  • Fix broken references -- repairs tax rate references that point to deleted or changed tax rates.

Products: Read-only table of all products across your form's product fields.

Rooms: Read-only table of all rooms across your form's room fields.

Translations​

Manage languages and translate all form texts.

Languages:

  • Add languages from 35+ supported options (German, English, French, Spanish, Italian, Dutch, and many more).
  • Per language: enable/disable, set as default, or delete.
  • The language the form was created in cannot be deleted.

Translation sections:

  • Summary texts.
  • Validation messages.
  • Field labels and options.
  • Multi-step labels.
  • Submission texts.
  • Commerce texts.

Each section shows all form labels side by side with input fields for each language.

Form Review​

Get an AI-powered quality check for your form.

  • Click Analyze with Flow to start the analysis.
  • Click Update analysis to re-run after making changes.
  • Shows when the last analysis was generated.

Results include:

  • A summary of findings.
  • Scores for quality, UX, clarity, and completeness.
  • Individual findings with title, description, severity, and a link to the affected field.
  • Tips and recommendations.

JSON Preview​

View, copy, download, or import the form configuration as JSON.

  • Copy JSON -- copies the configuration to your clipboard.
  • Download JSON -- saves as a .json file.
  • Import JSON -- replaces the current form with an uploaded configuration.
  • Refresh -- reloads the preview.

Import behavior:

  • Import replaces the entire form. Warning: this deletes existing data.
  • Upload a .json file or paste JSON into the text area.
  • Tax rates are adjusted automatically to match your workspace tax settings.
  • Validation errors are shown inline.

Steps​

A "step" is one page of your form. Multi-step forms show one step at a time. The customer moves through them with Next and Back buttons.

  • You can add up to 20 regular form steps.
  • You can reorder steps by dragging them.
  • You can add one Summary step. The summary step shows the customer everything they entered before they submit. They can go back and correct any field.
  • The result page after submission can be either a success page or a redirect to another URL.

Quick start: Click Add Step to create a new step. Inside the step, click Add Row, then drag a field from the sidebar into the row.

Step order rules:

  • The success/redirect page is always last.
  • New steps are added before the summary and success page.
  • When moving rows or fields, summary and success steps are not available as targets.

Redirect mode:

  • Enter a redirect URL to switch from the success page to redirect mode.
  • If you enter just a domain, it is automatically completed to a full URL.
  • You can add a success animation and delay before the redirect happens.

Rows and columns​

  • Add rows and pick a column layout.
  • Change the column layout later.
  • Reorder rows within a step.
  • Duplicate or move rows (when the fields inside allow it).
  • Style rows with a background image, background color, spacing, and border radius.

Important rules:

  • Deleting a step, row, or column also deletes everything inside it. Warning: this cannot be undone.
  • Related conditional logic rules are removed automatically when you delete layout elements.
  • Row actions (delete, move, duplicate) can be disabled when the row contains restricted fields.
  • The last column in a row cannot be removed.
  • Column widths are adjusted automatically to fit the grid.
  • Reducing the number of columns moves fields from removed columns into the remaining ones.

Fields​

  • Add fields to any column.
  • Drag fields within and across columns.
  • Duplicate or delete fields (when restrictions allow it).
  • Move fields to another step.
  • Open field settings by clicking on a field.

Moving fields:

  • The move dialog shows only regular form steps (not summary or success).
  • If you do not pick a specific target, the field goes to the first row and first column.
  • If the target step is empty, a row and column are created automatically.

Copying from another form​

You can copy steps, rows, or fields from any other form.

How it works:

  • The form picker shows your most recent forms first and excludes the current form.
  • Only regular steps can be copied (summary and success steps are skipped).
  • All IDs are regenerated to avoid conflicts.
  • References to catalogs and tax rates are kept as-is.
  • Fields that are restricted in the target form are filtered out.
  • Empty rows and columns are removed automatically after filtering.
  • If the target location is not valid, content is placed in the first regular step.
  • Single fields are added to the last row and column (or a new row is created if needed).

Conditional logic and translations on copy:

  • Conditional rules are copied only if they remain valid in the target form.
  • Invalid references are removed. Some rules may be dropped entirely.
  • Translations are copied only for languages already enabled in the target form.
  • If the source form uses a different default language, base texts may be rewritten.

Validation before saving​

You cannot save or publish until all required checks pass.

Examples of what blocks saving:

  • Missing title, fields, or rows.
  • Event forms without the required event fields (title and date).
  • Room fields with hourly pricing that are missing the required start/end time fields.

Header actions​

  • Undo and Redo -- also available via Ctrl/Cmd+Z and Ctrl/Cmd+Y (or Ctrl/Cmd+Shift+Z).
  • Preview -- see how the form looks to your customers.
  • Save -- save your changes.
  • Publish -- publish the template so you can create instances.

Rapid edits are grouped together in the undo history. The history has a limited capacity.