Form element types — full reference

Available on Professional and Unlimited

The form designer ships 17 element types. This page covers each one with:

• When to use it — the real-world question shape it fits.
• What lands in the answer JSON — so you can predict what shows up in FormSubmission.AnswersJson and what segment filters can match.
• Charts — what the stats page renders for it automatically.
• Gotchas — edge cases worth knowing.

Input fields

Textbox

Single-line text input. The all-purpose field for short free-form answers.

• When: name, company, job title, short comment, anything you'd type into one row.
• Answer shape: "jobTitle": "Senior engineer" — plain string.
• Charts: top-10 frequency table on the stats page (textboxes don't pie-chart well — too many unique values).
• Gotchas: Email and URL fields use Textbox today — if you need strict validation, set the field's regex in the inspector.

Comment

Multi-line textarea. Same as Textbox but for paragraphs.

• When: "Tell us more", feedback, message body, address (single-block), bio.
• Answer shape: "feedback": "I really enjoyed..." — plain string with newlines preserved.
• Charts: top-10 frequency table.
• Gotchas: Long comments inflate the answers JSON. Forms with many comment fields and many submissions can grow the FormSubmission table fast — fine for normal use, worth knowing for high-volume signup forms.

Radiobutton

Pick one option from a list (radio button group).

• When: T-shirt size, country region, single-pick categorisation.
• Answer shape: "shirtSize": "M" — the picked option's value (or index if no value set). The library binds the option's Value field; if you only set Text, the index is stored.
• Charts: pie by default, bar / line toggleable.
• Gotchas: Schema-defined choices appear in charts even when nobody picked them — zero-count rows preserved so a 0 / 3 / 12 split renders accurately. To avoid "index 1 / 2 / 3" labels in charts, always set the option's Value field explicitly.

Checkbox

Pick zero or more options (checkbox group).

• When: "Which features do you use?", multi-select skills, dietary requirements.
• Answer shape: "features": ["links", "qrcodes", "forms"] — array of picked option values.
• Charts: bar by default (multi-pick doesn't pie cleanly), pie / line toggleable.
• Gotchas: Empty selection writes [] rather than skipping the key. Multi-value answers collapse to ;-separated strings on the CSV export (forms;qrcodes;links).

DropdownList

Single-pick dropdown — same data shape as Radiobutton, different UX.

• When: long option lists where radio buttons would clutter the page (countries, products, languages).
• Answer shape: "country": "GB" — picked option's value or index.
• Charts: pie by default, bar / line toggleable.
• Gotchas: same as Radiobutton — set Value explicitly to avoid index-as-value.

Switch

Yes / no toggle (boolean).

• When: "I agree to the terms", "Subscribe me to the newsletter", "Add me to the waitlist".
• Answer shape: "agreed": true — literal boolean.
• Charts: pie split into Yes / No.
• Gotchas: a required Switch must be ticked to submit. Useful for consent flows, forced-acknowledge gates.

Slider

Numeric slider with configurable min / max / step.

• When: budget range, satisfaction score on a wide scale, any bounded numeric estimate.
• Answer shape: "budget": 750 — integer or float depending on step.
• Charts: bar histogram by default (auto-bucketed), line toggleable.
• Gotchas: validator warns when min >= max. The default tick step is 1 — for fine-grained sliders set step to 0.1 or smaller.

Specialised survey types

Rating

1–5 star rating widget.

• When: "How was your experience?", short post-event satisfaction, product reviews.
• Answer shape: "experience": 4 — integer 1–5.
• Charts: bar histogram (count per star).
• Gotchas: always 1–5 — for finer granularity (1–10) use a Slider.

NPS — Net Promoter Score

The industry-standard 0–10 "How likely are you to recommend us to a friend?" scale. Net Promoter Score categorises respondents into:

• Promoters (9–10) — loyal enthusiasts who'll tell others.

• Passives (7–8) — satisfied but unenthusiastic, vulnerable to competitors.

• Detractors (0–6) — unhappy, can damage your brand by word-of-mouth.

• NPS = % Promoters − % Detractors. Range −100 to +100.

• When: post-purchase, post-onboarding, periodic satisfaction sweeps. The single most-tracked customer metric in SaaS.

• Answer shape: "likelihood": 8 — integer 0–10.

• Charts: bar histogram across 0–10. The stats page doesn't compute the categorical NPS score itself — you can do that quickly from the CSV export.

• Gotchas: NPS works best when paired with a follow-up Comment field ("What's the main reason for your score?"). The qualitative answers explain the quantitative ones.

LikertSkill — Likert agreement scale

A Likert scale measures attitude or opinion across an ordered range, classically 5 or 7 points: "Strongly disagree → Strongly agree". Different from a Rating in that it's labelled ordinals, not numbers.

• When: survey research, employee engagement, attitude measurement, course evaluations.
• Answer shape: "motivation": "Agree" or its index — depends on schema configuration.
• Charts: bar histogram across the points.
• Gotchas: classically odd-numbered (5, 7) so respondents have a neutral midpoint. Even-numbered scales (4, 6) force a side and are sometimes used to eliminate fence-sitters — both are valid, pick deliberately.

Matrix

A grid of related radio questions sharing the same answer columns. Each row is its own question; each column is a possible answer applied to all rows.

• When: "Rate each feature from 1–5" across many features. Course evaluations across multiple criteria. Brand-attribute associations.
• Answer shape: "productMatrix": { "speed": "Excellent", "reliability": "Good", "price": "Average" } — object keyed by row name.
• Charts: not auto-charted on the stats page (would need a stacked bar per row — out of scope today). Available in the raw export for spreadsheet analysis.
• Gotchas: limit yourself to ~8 rows; longer matrices get skipped or speed-clicked ("straight-lining"). If you have 20 attributes to rate, split into multiple matrix elements with 6–8 rows each.

ImagePicker

Visual single-select where the options are images instead of text labels.

• When: "Pick your favourite design", style preference, image-based onboarding.
• Answer shape: same as Radiobutton — the picked option's value or index.
• Charts: pie by default. The chart shows option labels (the Text field) not the images.
• Gotchas: hosting images is on you — paste in URLs of images already hosted somewhere. The form page renders them via <img> so they need to be reachable.

Layout and structure

Header

Display-only heading. Splits the form into named sections.

• When: multi-section forms ("Contact details" / "Project requirements" / "Budget"). Visual grouping for long forms.
• Answer shape: nothing — Header isn't an input. No JSON key produced.
• Charts: none.

HTML

Arbitrary HTML content. Drop in instructions, images, links, or formatted explanations.

• When: contextual help text, terms-and-conditions blurb, embedded video.
• Answer shape: nothing — display-only.
• Gotchas: no script tags allowed (sanitised on render). For interactive content, build a separate page and link to it.

Panel

Grouping container — wraps child elements in a styled box.

• When: visually separating a sub-set of fields ("Optional details" expandable group).
• Answer shape: nothing of its own — child elements produce their own keys as usual.

Collapsable

Like Panel but the contents collapse / expand on click.

• When: optional sections that most respondents will skip — "Advanced settings", "Add-ons".
• Answer shape: nothing of its own; children behave normally.
• Gotchas: collapsed content still validates. Required fields inside a collapsed Collapsable block submission until the user expands and fills them.

Repeater

A group of fields the respondent can repeat N times. Like a mini-form within the form.

• When: "List your previous employers" (with name + role + dates per row), "Add up to 5 attendees" (with per-attendee details), order line items.
• Answer shape: "employers": [ { "name": "...", "role": "..." }, { "name": "...", "role": "..." } ] — array of objects.
• Charts: not auto-charted. Available in raw export but per-row analysis needs spreadsheet work.
• Gotchas: bound entries below the inspector's MinCount aren't deletable. Set MaxCount to cap memory usage on long forms.

Coverage — what's missing

The 17 types above cover ~90% of mainstream form needs. The notable gaps:

Likely additions

The gaps with the highest demand-vs-effort ratio:

• File upload — high value (CV submissions, photo competitions, document collection). Requires storage integration with the platform's upload service so files live alongside other user content. Plan-gated since a single 100 MB upload would fill a Free user's storage quota.
• Date / DateTime picker — small effort, big polish win. Date inputs in Textbox work but native pickers (and stricter validation) reduce malformed answers.
• Phone number with country code — common in B2B lead capture. The Account page already has a country picker we could lift the country list from.

Unlikely additions

• Signature pad — specialist (e-signing tools handle this better; we'd be building a worse version of DocuSign / SignRequest).
• Visible CAPTCHA — reCAPTCHA / hCaptcha are well-established external services; the honeypot we ship covers the common case without a third-party dependency.
• Payment input — orthogonal to forms. Use payment products and link from the form's confirmation email or thank-you copy.

If you have a real use case for any of the gaps above, open a ticket — clear customer demand jumps an item to the top of the queue.

Related

• Forms — build, embed, capture — designing the form
• Form submission analytics — reading the stats page and exporting data
• Newsletter subscribe page & group embed — email-only signup alternative