Multi-Step Forms
Break long forms into manageable steps with progress indicators, navigation buttons, and automatic state saving.
Components involved
Multi-step forms use 7 components that work together. All are in the Premium tier.
| Component | Purpose |
|---|---|
| Multi-Step | Wrapper that manages steps, current step index, and shared state |
| Next Button | Validates current step fields and advances to the next step |
| Previous Button | Goes back to the previous step (no validation needed) |
| Progress | Shows "Step X of Y" text indicator |
| Progress Bar | Visual progress bar (filled percentage or step dots) |
| Slot | Container for each step's content — your fields go inside slots |
| Summary | Displays a review of all entered data before final submission |
Setting up a multi-step form
- Insert a Framer Form onto your page (Insert Menu / Forms)
- Delete Framer's default submit button
- Insert Multi-Step inside the form — this is the wrapper
- Inside Multi-Step, add Slot components — one per step
- Place your Form Kit fields inside each Slot
- Add Next and Previous buttons (typically at the bottom of each step)
- Add Progress or Progress Bar above the slots
- On the final step, use Form Kit Submit instead of Next
formId value. The default is "default".How navigation works
The Next button validates all fields in the current step before advancing. If any field has errors, the step won't change and errors appear inline.
- Next — validates current step, then increments step index
- Previous — decrements step index (no validation)
- Progress / Progress Bar — reads the current step and total steps from the store
- Submit — set
showOnlyOnLastStep: true(default) so it only appears on the final step
Auto-jump
Single-select fields (Radio, Button Group, Select) can auto-advance to the next step the moment a user picks an option — no need to press Next. Great for tap-through surveys and quizzes.
Auto-save
Multi-Step automatically saves form data, current step, and visited steps to localStorage. If the user refreshes or returns later, the form picks up exactly where they left off.
- Data is saved under the key
formkit:{formId} - Saves on every field change and step change
- Restores: field values, current step index, and visited steps
- Disable with
saveToLocalStorage: falsein Multi-Step properties
URL parameter prefill
Multi-Step reads URL query parameters on page load and pre-fills matching fields. For example, visiting yoursite.com/form?email=user@example.com will pre-fill any field with name="email". Works with any field type — useful for personalized links from email campaigns or landing pages.
Conditional fields across steps
Conditional logic works across steps. A field on step 3 can depend on an answer from step 1 — and validation is skipped automatically when the field is hidden.
Submit button conditions
The Submit button respects the same conditional rules. Hide or disable it until the form is ready — for example, require a checkbox to be ticked or a specific option to be selected before users can submit.
Redirect URL after submit
Set the redirectUrl property on Multi-Step to send users to a thank-you page (or anywhere else) after a successful submission. Enable passDataToUrl to append form values as query parameters.