Multistep Form
Elements & Tagging
Use the Elements tab to connect your Webflow form and tag canvas elements with data-msf-* attributes. The CDN runtime reads these attributes on your published site.
Seven tagging actions
| # | Button | Webflow element | Attribute |
|---|---|---|---|
| 1 | Connect | Webflow Form | data-msf-form |
| 2 | Step | Div Block | data-msf-step="step-id" |
| 3 | Name Field | Input / Select / Radio | data-msf-field="name" |
| 4 | next / back / submit | Button or Link | data-msf-action="next" etc. |
| 5 | Progress Bar / Steps / Success | Div (your design) | data-msf-progress, data-msf-progress-steps, data-msf-success |
| 6 | Tag Error Message | Text near field | data-msf-error-for="email" |
| 7 | Tag Display | Text | data-msf-display="total" |
Automatic button behavior
The runtime shows and hides navigation buttons based on the current step:
| Step | Visible buttons |
|---|---|
| First step | Next only |
| Middle steps | Back + Next |
| Last step | Back + Submit |
You can place buttons globally (outside the form)—the runtime still manages visibility.
Progress bar
Design the track and fill in Webflow; MSF sets the width at runtime.
[data-msf-progress] ← track (your background, height, radius)
└ [data-msf-progress-fill] ← fill (your color; runtime sets width %)
The runtime also sets the CSS variable --msf-progress (e.g. 66%).
Attribute reference
| Attribute | Purpose |
|---|---|
data-msf-form |
Form wrapper |
data-msf-step |
Step container ID |
data-msf-field |
Field name |
data-msf-action |
next | back | submit |
data-msf-progress |
Progress track |
data-msf-progress-fill |
Progress fill (width set by runtime) |
data-msf-progress-steps |
Clickable step indicators |
data-msf-success |
Success message area |
data-msf-error-for |
Per-field error text |
data-msf-display |
Live variable display |
data-msf-config |
Full JSON config (written on Save) |