Multi-Step Form
premiumWrapper component that splits a form into multiple steps.
Overview
The Multi-Step Form component wraps your form fields and splits them into sequential steps. Each direct child becomes a step. Includes auto-save to localStorage, URL parameter prefill, and coordinates with Next/Previous buttons and progress indicators.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
formId | String | "default" | Unique identifier that connects all FormKit components in this form. |
canvasView | Enum | "single" | "single" shows one step at a time on canvas, "all" shows all steps stacked. |
canvasPage | Number | 1 | Which step to preview on canvas. |
saveToLocalStorage | Boolean | true | Auto-save form progress to localStorage. |
submitUrl | String | -- | API endpoint for form submission (POST). |
redirectUrl | String | -- | Redirect URL after successful submission. |
passDataToUrl | Boolean | false | Append form data as URL parameters on redirect. |
successMessage | String | "Form submitted successfully!" | Message shown on successful submission. |
Features
- Each direct child = one step
- Auto-save progress to localStorage
- URL parameter prefill on load
- Coordinates with Next, Previous, Progress, ProgressBar components via shared store
- Canvas preview: show single step or all steps stacked
- Generates hidden inputs for all form data (native Framer Forms submission)
Tips
All FormKit components in a multi-step form must share the same formId.
Place Next/Previous buttons and progress indicators outside the multi-step wrapper but with the same formId.
Use canvasView "all" to see all steps at once while designing.