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-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.