All docs
4 min read

Form builder

The builder is where you design a hosted form — the kind we render at formspring.io/p/{slug}. It has three columns:

  • Left: the field palette (drag a type onto the canvas).
  • Middle: the canvas, a live preview of the form as your visitors will see it.
  • Right: the inspector — config for the selected field, or for the form as a whole when nothing is selected.

If you only need a backend endpoint for your own HTML, you can skip the builder entirely. See Forms overview → for the legacy mode.

Adding fields

Drag a type from the palette onto the canvas, or click it to append. Fields snap to the bottom of the current step. Reorder by dragging the handle on the left edge of any field; delete with the trash icon on the right.

Each input field has three things you'll always set:

  • Label — what the visitor reads.
  • Name — the submission key (a-z0-9_-, max 64 chars). This is the property in the JSON payload, and the column header in CSV exports. Pick once, don't rename — webhook consumers depend on it.
  • Required — toggle on if the field must be filled to submit.

Markup-only blocks (heading, divider, html) don't have names — they exist for layout only and never appear in submissions.

The field-config drawer

Selecting a field opens the inspector on the right. Every field has the basics (label, name, placeholder, help text, required). Type-specific config sits below:

  • select / radio / checkbox — option list (each with value and label).
  • fileaccept MIME list and multiple toggle.
  • textarearows.
  • numberstep, plus min/max under validation.
  • price / computedformula and (for price) amount + currency.

Every input field also has a Validation subsection: min, max, pattern (regex), and a custom error_message. See Validation → for the full reference.

Multi-step forms

Forms default to a single step. To split into pages, open Settings (the cog icon top-right) and toggle Multi-step. Drag a Step divider into the canvas to mark a page break.

Each step is gated: a visitor can't advance until the fields on that step pass validation. The submission still lands as a single payload — steps are purely a UX layout, not separate submissions.

Visibility rules (conditional fields)

Each field has an optional visibility block in its config. Show or hide a field based on the value of another:

{
  "visibility": {
    "all": [
      { "field": "contact_method", "op": "equals", "value": "email" }
    ]
  }
}

Use all for AND, any for OR. Hidden fields never validate and never appear in the payload.

Theme

Click the canvas background (or the Theme tab in the inspector) to edit the form's design tokens. Color, radius, font, spacing — all stored as a small JSON blob and applied via CSS variables on the public page. Full reference in Themes →.

Settings

The Settings drawer (cog icon) covers everything that isn't a field or a token:

  • Multi-step — see above.
  • Submit button label — defaults to "Submit".
  • Success message — what visitors see after a successful submission.
  • Redirect URL — if set, the visitor is sent there instead. We append ?ok=1.
  • Allowed origins — restrict which domains can POST.
  • Honeypot field name — defaults to _gotcha.

Preview

The canvas is already a live preview, but Preview (top-right) opens the full hosted page in a new tab so you can see exactly what visitors will. The preview URL works for drafts — the public URL doesn't, until you publish.

Publish

Click Publish when you're ready to go live. Publishing does two things:

  1. Sets published_at on the form.
  2. Makes formspring.io/p/{slug} accept visitors.

You can keep editing after publishing — changes go live the moment you save. To take it back down, click Unpublish. See Publishing →.

What's next