Multistep Form
Editor & Flow
The Editor tab is where you configure logic after tagging elements on the canvas.
Sub-tabs
| Sub-tab | Purpose |
|---|---|
| Flow | Step order, branching conditions, actions on edges |
| Validation | Required, regex, min/max, match field, presets |
| Variables | Input, URL param, default sources; formulas |
| Visibility | Show/hide fields, steps, or elements |
| Actions | Redirect, setVariable, webhook, calculate, etc. |
| Settings | Navigation, progress, after-submit, webhooks |
Flow canvas
- Click Load canvas to import tagged steps from the Webflow canvas.
- Steps connect linearly by default.
- Add Condition nodes for branching (yes/no handles to different steps).
- Add Action nodes on paths (set variable, webhook, redirect, etc.).
- Click Save to write config to the form element and backend.
You can also Load from staging to parse a published .webflow.io page and rebuild the flow from HTML.
Validation
- Required, regex, min/max length, min/max number, match field
- Presets: email, phone, URL
- Validation mode (Settings):
perStep— validate current step on NextallOnSubmit— validate all rules on Submit only
Tag error text elements with data-msf-error-for="{fieldName}" so the runtime can display messages.
Variables & formulas
- Sources: form input, URL parameter, or default value
- Formulas:
@[fieldA] + @[fieldB] - Display with
data-msf-display="variableName"or inline@[variableName]in text
Actions
| Trigger | When it runs |
|---|---|
| On submit | Before form POST |
| After submit | After form POST |
| On step enter | When entering a specific step |
Types: redirect, setVariable, showElement, hideElement, webhook, calculate
Settings highlights
| Group | Options |
|---|---|
| Navigation | Entry step, auto-next, auto-next on select, validation mode |
| Progress | Save progress, resume progress, progress bar, progress steps |
| After submit | Success message, redirect, conditional success, webhooks |