Getting Started

Multistep Form (MSF) is a Webflow Designer Extension for building Inputflow-style multi-step forms. You tag elements on the canvas, configure flow and validation in the sidebar Editor, and publish a CDN script that runs on your live site.

Design principle: MSF adds functionality (steps, validation, variables). It does not change your Webflow colors, fonts, or layout.

Install Multistep Form in Webflow

Step 1: Open Apps in Webflow Designer

In the Webflow Designer, open the Apps panel from the left sidebar.

Step 2: Search for Multistep Form

Find Multistep Form in the app marketplace and click Install.

Step 3: Open the app from your project

After installation, launch Multistep Form from the Apps panel inside the same project.

Authenticate on new sites

If the app detects a new or unregistered site, it shows an authentication screen.

1. Click Authenticate.
2. Approve access in Webflow.
3. Return to the Designer and reopen the app.

Quick start — 8 steps

1. Build your form layout in Webflow (each step = a Div Block inside the form).
2. Sidebar → Elements → select your Webflow form → Connect.
3. Select each step Div → name it → click Step.
4. Tag inputs, selects, and radios with Name Field.
5. Tag buttons as next, back, or submit.
6. Sidebar → Editor → Load canvas → configure flow → Save.
7. Publish your site in Webflow.
8. Sidebar → Embeds → confirm the CDN script is registered.

Sidebar tabs

Canvas structure (overview)

Form (data-msf-form)
├── Step 1 Div (data-msf-step="personal")
│   ├── input (data-msf-field="email")
│   ├── text (data-msf-error-for="email")
│   └── [Next] (data-msf-action="next")
├── Step 2 Div (data-msf-step="details")
│   └── [Back] [Next]
├── Step 3 Div (data-msf-step="confirm")
│   └── [Back] [Submit] (data-msf-action="submit")
├── Progress track (data-msf-progress)
│   └── fill child (data-msf-progress-fill)
└── Success box (data-msf-success)

See Elements & Tagging for the full attribute reference.