Form Studio
Form Studio forms are hosted forms with a page layout. A layout has a header, a page made of sections, and a footer. Each section holds fields and content blocks in one to four columns. On a phone, every section shows as one column.
Form Studio is available when it is turned on for your workspace and included in your plan.
Plans
Basic hosted forms work on every plan. Form Studio is included in some plans and not others.
| Without Form Studio in your plan | What you see |
|---|---|
| Forms list, New form, brand kits and saved sections | A locked preview. |
| The studio editor | The form as a read-only preview. |
| Preview of a layout | Refused. A form without a layout still previews. |
| Signed prefill links | Refused. |
| Publish and share | Link and QR code works. Embed and Custom domain are locked previews. |
| The public page | A "Powered by DataLug" line under the form. |
With Form Studio in your plan, the public page has no "Powered by DataLug" line.
To publish a form, share its link, embed it on your site or serve it on your own domain, see Sharing and embedding forms.
Fields
A layout uses every hosted form field type, plus two more:
| Field | What the visitor sees |
|---|---|
| Radio | A group of options with one choice. |
| Multiselect | A group of checkboxes. A required multiselect needs at least one choice. |
Each field shows its label, help text and error beside it. Grouped options are announced as one group with its label. A summary of errors is shown above the form, as on every hosted form.
Content blocks
| Block | What it shows |
|---|---|
| Heading | A heading under the page title or the section title. |
| Text | Paragraphs, bold, italic, links, and bulleted or numbered lists. |
| HTML | A limited set of HTML tags. Anything outside the set is removed when the form is saved and again when the page is shown. |
| Image | An image from your account with its alternative text. |
| Divider | A horizontal line. |
| Spacer | Empty space between blocks. |
| Card | A boxed group of blocks. |
| Tiles | A list of boxes, each with a title, text and an optional image. |
| Accordion | Sections the visitor opens and closes. |
| Table | A table with a header row. |
| Columns group | Blocks in their own one to four columns inside a section. |
Accordions open and close without any script on the page.
Rules
A section, field or block can have a rule that shows it only when answers match. A rule checks one or more answers and needs all of them, or any of them, to match.
| Check | Matches when the answer |
|---|---|
| Equals | Is the given value. |
| Does not equal | Is not the given value. |
| Is one of | Is in the given list. |
| Greater than | Is a number above the given number. |
| Less than | Is a number below the given number. |
| Is filled | Has a value. |
| Is empty | Has no value. |
A hidden field is never required, and any value sent for it is dropped. A rule that reads a hidden field reads it as empty.
Repeaters and grids
A repeater section lets the visitor add and remove a set of fields, such as one set per guest. A grid shows the same fields as rows of a table. Each section sets the fewest and most rows allowed.
Each row is checked with the field rules, and blank rows are ignored. In the workflow, a repeater or
grid arrives as one list under fields.<section id>, with one item per row. Use Split array at
path on the Webhook Trigger to turn each row into its own record.
Steps
A layout with more than one page shows one page at a time, with a progress line and Back and Next buttons. Each step is checked before the next one opens. The form is sent once, from the last step.
Without JavaScript, every step shows on one page and the form still submits. The preview also shows every step on one page.
Prefill
A field with prefill turned on takes its starting value from the page address, with the field key
as the query parameter, such as ?email=ana@example.com. The visitor can change it. Fields inside a
repeater or grid cannot be prefilled.
A signed prefill link sets values the visitor cannot change. A Builder, Admin or Owner creates the link for a form, with the values and an expiry of up to 90 days. A changed or expired link sets no values. Rotating the form's webhook secret retires every signed link for that form.
Prefilled values are checked like any other answer.
Brand styling
The page uses a fixed set of brand values: colours for the primary button, text, surfaces, borders, errors and the focus outline; heading and body fonts; base text size; corner radius; spacing; and button and field styles. A form without its own brand values looks like a standard hosted form.
Colours are hex values, sizes are pixel or rem lengths, and fonts come from a fixed list. Any other value is refused.
Each pair of brand colours is checked against WCAG 2.1 AA contrast: 4.5 to 1 for text, 3 to 1 for large text, borders, buttons and the focus outline. A failing pair is reported with the nearest colour that passes.
Brand kits
A brand kit is a saved set of brand values with an optional logo. Your workspace keeps a library of kits, and a kit can belong to one group. A form uses one kit. One kit can be the workspace's default, and a kit used by a form cannot be deleted. See Brand kits.
Eight starter kits come with Form Studio: clean, corporate, bold, dark, soft, editorial, playful and minimal. Starter kits are read only. Copy one to change it.
Saving a kit reports any colour pair that fails the contrast check, with a suggested colour. A kit with a failing pair can be saved, but a form that uses it cannot be published until the pair passes.
When you publish, the form keeps a copy of its kit. Later changes to the kit reach the public page the next time you publish.
Images and fonts
You can upload PNG, JPEG, WebP and SVG images and WOFF2 fonts. A file's content must match its type. SVG images are cleaned of scripts, event handlers and links to other sites; an SVG that cannot be cleaned is refused. Each workspace has limits on file size, file count and total storage.
A kit's fonts come from a fixed list of Google Fonts families, or from your uploaded fonts. When you save a kit, the Google Fonts files are copied into your workspace, so the public page loads them from DataLug. Every family on the list uses the SIL Open Font License.
Images and fonts are served from the form's own address. A file still used by a kit or a form cannot be deleted.
Importing a brand
Form Studio can propose a kit from:
| Source | What is read |
|---|---|
| Token file | A W3C Design Tokens file or a DataLug theme file. |
| CSS file | Custom properties, colours and font families. No CSS is kept. |
| DESIGN.md | Colours and fonts named in the document. |
| Website address | The theme colour, styles from the same site, font families, and logo and icon candidates. |
An import saves nothing. You review the proposed kit and any notes about values that were skipped, then save it as a new kit. Website imports only read public addresses.
Preview
A Builder, Admin, Owner or Auditor can preview an unsaved layout. The preview is the same page a visitor sees, without the bot check, and is never public. Nothing is saved or sent to a workflow.
The studio editor
Open a form in the studio with Open in studio on its row in the Hosted forms tab. The studio
has its own address, /forms/<form id>/studio. The Hosted forms tab and the simple editor stay
as they are.
A form without a layout opens with an offer to upgrade it. Upgrading turns its fields into one section and saves only when you confirm. Open in simple editor keeps the form as it is. Without Form Studio in your plan, the studio shows the form as a read-only preview.
The studio has three columns:
| Column | What it holds |
|---|---|
| Left | Blocks to add, grouped as Layout, Fields, Content and Dynamic, with a search box. Layers lists every step, section and block as a tree in reading order, with a warning icon on any block that needs a fix before publishing. Sections shows ready-made sections, such as contact details, an address and an attendee list, and your saved sections as cards, each with a small outline and its number of fields. |
| Centre | The form. The bar above it has a tab for each step, with a dot on a step that needs a fix, Add step, and the device switch: Desktop (760 px), Tablet (600 px) or Phone (375 px). The label above the form names the width and the step, such as "Desktop, 760 px. Step 1 of 3". On a phone, every section shows as one column. |
| Right | The inspector, with the Block, Form and Brand tabs. |
The form on the canvas uses the colours, fonts, spacing, button and field styles and logo of its brand kit, with this form's own changes.
Select a block to edit it. The selected block shows its type with Move up, Move down, Duplicate and Delete. A copy goes just below the original, with its own block ids and field keys.
The header shows the form's name and status: Draft, Published, Unpublished changes or Archived. Rename form changes the name. The header also holds undo and redo, the save status, Preview, Publish, and a menu with Duplicate, Share and embed, Open webhook and Archive. While the preview is open, Preview reads Back to editing. While a pre-publish check fails, Publish shows how many items need a fix, such as "2 to fix, Publish".
The inspector
| Tab | What it sets |
|---|---|
| Block | For a field: Content (label, key, help text, placeholder, and options one per line), Behaviour (required, and the fewest and most characters or the lowest and highest number), Prefill (on or off, with an example address), and its Show when rule. For a section: its columns and, for repeaters and grids, the fewest and most rows. Each content block has its own settings. For a step: its title. |
| Form | The submit button label and the consent checkbox. After submit sets the message shown after a response, or a redirect to an https address. Spam protection shows the hidden trap field, which is always on, the human check, and the limit of 10 responses a minute per visitor. Only an Owner or Admin can turn the human check off. Embed and domain lists the sites allowed to embed the form and its custom domains, with a link to Publish and share. |
| Brand | The brand kit, with a contrast result for each kit and Edit brand kit. This form's own changes: primary colour, corner radius, button corners (square, rounded or pill), field style and whether the logo shows. Any contrast problem is listed. |
After submit and Spam protection each have their own save button and are not part of undo.
Saving
Every change saves on its own after a short pause. A change the form cannot hold, such as an empty section, is not saved until it is fixed; the studio names the problem and Show selects it.
If the form was changed somewhere else since you opened it, the studio stops saving and offers Reload, which opens the latest version. Undo and redo go back through your recent changes.
Publishing
Publish saves any pending change, then opens Before you publish, which runs the pre-publish checks: layout limits, field keys, field labels, image alternative text, brand contrast and the form's webhook. Problems are grouped by kind:
| Group | Fix |
|---|---|
| Colour contrast | Each failing pair with its ratio. Choose another kit opens the Brand tab. Fix in brand kit opens the kit. |
| Field labels | Add label selects the field and puts the cursor in its label. |
| Image alt text | Add alt text selects the image and puts the cursor in its alternative text. |
| Other checks | Show selects the block the problem names. |
While a check fails, the publish button names how many items to fix, such as "Fix 2 items to publish", and stays off. Once the form is published, Share and embed opens its link, QR code, embed and domain settings. Preview shows the page a visitor sees, at the chosen device width.
Moving blocks
Drag a block from the palette onto the form, or drag blocks and sections to reorder them, within a section, across sections and columns, and in the layers tree. A line marked "Drop here" shows where the block lands, and an empty section reads "Drop blocks here".
Everything also works from the keyboard:
| Keys | Where | What it does |
|---|---|---|
| Left, Right, Home, End | The left panel tabs and the step tabs | Moves between tabs. |
| Enter | A block in the palette | Adds it below the selected block. |
| Up, Down, Home, End | Layers | Moves between layers. |
| Right, Left | Layers | Opens or closes a step or section, or moves into or out of it. |
| Enter | Layers or the canvas | Selects the block. |
| Space, then the arrow keys, then Space | A block or a layer | Picks it up, moves it, and drops it. Escape puts it back. |
| Alt+Up, Alt+Down | Layers or the canvas | Moves the selected block up or down, into the next section at an edge. |
| Alt+Right | Layers | Moves the selected block into the card or group above it. |
| Alt+Left | Layers | Moves the selected block out of the card or group holding it. |
| Delete | The canvas | Deletes the selected block. |
| Ctrl+D | The canvas | Duplicates the selected block. |
| Escape | The canvas | Clears the selection. |
| Ctrl+Z, Ctrl+Shift+Z | The canvas | Undo and redo. |
Canvas keys do nothing while you type in a box. On a Mac, use Cmd in place of Ctrl.
Each move is announced to screen readers.
The studio applies your workspace's layout limits as you build, such as the most blocks, steps and repeater rows, and names the limit when a change would pass it.
The Forms list
Forms in the main menu lists every form in your workspace. The tabs above it show how many forms and brand kits the workspace has.
| Column | What it shows |
|---|---|
| Name | The form's name and its path. |
| Status | Draft, Published, Unpublished changes or Archived. |
| Brand kit | The kit's colours and name. |
| Sends to | The form's webhook and the project it runs, or Not linked. |
| Updated | When the form was last changed, and by whom. |
Select the Name or Updated heading to sort by it. Select it again to reverse the order.
Search by name or path. Status filters the list and shows how many forms have each status. Brand kit shows the forms that use one kit, or the forms with no brand kit. The search, filters, sort, page and rows per page are part of the page address, so a list can be bookmarked or shared. When nothing matches, Clear filters shows every form again.
Each row has a menu of actions:
| Action | What it does |
|---|---|
| Open in Form Studio | Opens the form in the studio. |
| Open simple editor | Opens the form in the Hosted forms editor. |
| Open webhook | Opens the form's webhook. |
| Share and embed | Opens the form's link, QR code, embed and domain settings. |
| Copy link | Copies the public link. Shown when the form has one. |
| Duplicate | Makes a draft copy named "Copy of" and the form's name. Builders, Admins and Owners. |
| Archive | Takes the form offline and keeps it. Admins and Owners. |
A copy has its own path and webhook, and is never published until you publish it. Under the list, Rows per page shows 25, 50 or 100 forms. The Hosted forms tab under Webhooks keeps working and links to this list.
Creating a form
New form on the Forms list opens the New form page, at /forms/new. It has three steps and a
summary of your choices:
| Step | What it sets |
|---|---|
| 1. Start from | Blank form starts with one empty section. Template starts from a ready-made form; each template card shows its layout and how many fields and steps it has. Describe it to Milo drafts the layout from your description; the examples under the box fill it in. See Milo in Form Studio. |
| 2. Brand kit | The brand kit the form uses, shown as a small preview with its colours and heading font. Skip for now uses plain styles. |
| 3. Name and path | The form's name, which follows the template's title until you change it, and its path, the last part of the public link. The page shows the link as you type. An empty path is made from the name plus a short code. |
The third step also picks the webhook: a new form webhook, or a form webhook that has no form yet. A new webhook also needs the project it runs. Only an Owner or Admin can create a webhook.
Create form, or Draft with Milo when Milo drafts the layout, creates a draft and opens it in the studio. New forms start as drafts, and nothing is public until you publish.
Form templates
Ten form templates come with Form Studio: contact, lead capture, event registration, order, survey, job application, support request, quote request, feedback and newsletter sign-up. Each one passes the pre-publish checks as it is. A template is copied into the new form, so later changes to the form never change the template.
Saved sections
Select a section in the studio and use Save as section in the inspector, or Save selected section on the Sections tab, to keep a copy of it for other forms. Saved sections appear on the Sections tab of the studio with Insert, which adds a copy with its own block ids and field keys.
The Saved sections tab of the Forms area lists your workspace's saved sections, where you can rename or delete them. A saved section can belong to one group. Each workspace has a limit on how many sections it saves, set by an administrator.