Fields reference

Every element you can add to a form, what it's for, and what you can configure.

This is a practical reference to the building blocks you place in the builder. Add elements from the block picker — via the + in the layers panel or by dragging onto the canvas — then select one to configure it in the right-hand inspector. The picker groups blocks into Layout, Form Fields, Content, and Actions. (The close button isn't a block — it's part of the form's chrome, configured in the Form settings.)

Input fields

FieldWhat it's forWhat you can set
TextShort free-text answersPlaceholder · Required (+ custom error message)
Text areaLonger free-text answersPlaceholder · Rows (1–20) · Required (+ error)
EmailEmail capture, with built-in email validationPlaceholder · Required (+ error)
PhonePhone capture with a country dial-code pickerPlaceholder · Default country · Required (+ error)
DateA date answer, via a date pickerRequired (+ error)

Every required field blocks the step until it's filled, and shows your error message (or "This field is required" if you leave it blank). Email, phone, and date formats are validated automatically.

A few field-specific details:

  • Phone shows a flag-and-dial-code picker in front of the input. Default country (US by default) sets which dial code is pre-selected; when the shopper switches country, and you haven't set your own placeholder, the input shows an example number in that country's local format.
  • Date opens the shopper's native date picker — the same control they use everywhere else on their device, so it's familiar on mobile.
  • Text area wraps and grows with its Rows setting (3 by default).

Choice fields

FieldWhat it's for
Single choicePick from a list of options — toggle to multiple in the inspector
DropdownPick one from a select menu
Image choicePick from a grid of image tiles — also toggles single/multiple

For single-choice and image-choice fields you can configure:

  • Selection — toggle between Single and Multiple. Single-select questions are always required (an unanswered single-select is never a valid submission), so the Required toggle is hidden — but you can still customize the error message.
  • Auto-advance on selection — for single-select, picking an option moves to the next step automatically (no submit button needed). On by default.
  • Randomize option order — shuffles the options per visitor to remove order bias (stable within a visit, reshuffled on the next). Your canvas always shows them in your editing order.
  • Layout — arrange options Vertical, Horizontal, or Grid.
  • Add item — add options; edit each option's Label (its stored value is derived from the label automatically).

On an image choice, each tile's picture is a selectable image of its own — click into it to set the source, alt text, and fit with the same controls as a standalone image.

Dropdown is configured slightly differently: edit its Options inline (at least one is required) and set a placeholder.

The consent field handles marketing opt-in and disclaimers. Pick a Consent mode:

  • SMS (the default) — a required checkbox with TCPA-compliant copy. Required is locked on (legally, SMS marketing needs explicit opt-in).
  • Email — an informational disclaimer shown with email capture. No checkbox, and it isn't submitted as an answer.
  • Custom — you control the copy, the checkbox, and whether it's required.

Consent copy supports {{shop_name}}, {{terms}}, and {{privacy}}, which resolve to your store name and your policy links on the live form. Edit the copy from the inspector, or on the canvas for rich content like extra links. Set the policy links in Settings → Legal & compliance, and republish after changing them.

The checkbox itself has two dedicated color pickers in the inspector: Background color paints the unchecked box, Accent color fills it when checked.

Content

ElementWhat it's forNotes
HeadingA title (renders as H1–H4)Edit text inline on the canvas; supports merge tags
Text blockParagraph copyInline rich text; supports merge tags and policy links
ImageA picture, optionally linkedSource, alt text, fit, position, link, per-breakpoint image

Merge tags personalize copy at render time: type {{ while editing a heading or text block to insert First Name, Discount Code, Shop Name, Product Name, Product Price, or Cart Total.

Image controls live in the inspector's Asset section: pick or upload a source, set alt text, choose a fit (Cover — the default, fills and crops like a photo — Contain, Fill, None, or Scale down), and set a focal position for cropped fits. You can give mobile and desktop different images: the source you pick while editing the Desktop breakpoint becomes a desktop override, while the base image serves smaller screens. Add a link URL to make the image clickable.

Layout

ElementWhat it's for
ContainerGroup elements to arrange them (row / stack / grid) and to enable floating
SpacerAdd vertical space between elements

See Layout & responsive design for how containers unlock side-by-side and responsive layouts.

Actions & special

  • Submit button — set its Text and Loading text, and choose what happens On submit: go to the Next step, Skip step (advances without enforcing required fields — perfect for a "Skip for now" button), Close form, or Redirect to URL. Step routing rules still take priority over the button's own action.
  • Discount display — shows a static discount code inside the form. The Static code customers will see field suggests your store's active Shopify codes as you type, so you can't pick one that doesn't exist. Shoppers don't have to copy it — the code auto-applies to their cart as soon as they subscribe — but they still can (hide the copy button if you just want to show the code). Magic discounts don't need this element — they apply automatically at checkout.

Good to know

  • Field names are automatic. Each answer is stored under a key (like email or shopping_interest) that Formtoro assigns; it's also the default Klaviyo/Shopify property name. You can edit it in the inspector's Field name box — it must be unique within the form, and any logic rules referencing it update automatically. Those keys are what you'll see in Submissions and the Responses view.
  • Reuse a question across forms. Choice and dropdown fields offer a Reuse question picker that adopts another form's question key and answer set — responses from both forms then combine in shop-wide analytics instead of splitting into two look-alike questions.
  • Every field can hide its label. Toggle Show label in the inspector (or the eye icon in the layers panel). A field hidden entirely can't be required — hiding it un-requires it.
  • A few controls aren't exposed yet. Minimum/maximum selections on choice fields, minimum/maximum dates, and the heading's level (new headings render as H2) exist in the data model but don't have builder controls today — treat them as planned, not hidden.

Next steps

  • Building forms — placing and arranging these elements.
  • Logic engine — branch between steps and route shoppers based on their answers.