Help Centre
How can we help?
Search Docs
1. Add the Multi-Step Form component to the top of your form
Place the Multi-Step Form component at the top of your form.
This component converts the Framer form into a multi-step form.
Note: The component is only visible in the editor and will be hidden in the preview and on the published website.
2. Create a stack named “Pages” inside your form
Inside your form, create a stack and name it “Pages”.
Each item within the "Pages" layer will represent a form page.
It is crucial to name the layer “Pages” for the multi-step system to recognize it as the container for form pages.
During editing, all pages in the stack are visible. However, in preview or published mode, only one page will be visible at a time.
Elements outside the “Pages” layer will be visible on every page.
3. Create a stack for each page in your form
For each page of your form, create a stack inside the “Pages” layer.
Place the relevant inputs for each page within these stacks.
Ensure the submit button is on the last page of your form.
4. Add Previous and Next Page Buttons
Add buttons to navigate between the pages.
The previous button will be automatically hidden on the first page, and the next button will be hidden on the last page.
Make sure these buttons are placed outside of the “Steps” layer so they remain visible on all pages.
5. Customize Your Form
Enhance the user experience by adding the following elements:
Progress Bar: Displays users' progress as a horizontal or vertical bar.
Navigation Dots: Shows the current page with clickable dots.
Current Page Label: Displays the current page number and total pages as a customizable text label.
These components can be placed anywhere within the form for better user guidance.
6. Add Logic (Optional)
If you need to show different inputs based on previous answers, you can add logic to your form:
This feature allows you to create multiple routes in multi-step forms.
Navigate to different pages based on the answers to previous questions.
For more details on how to implement logic, refer to the FramerForms documentation.
By following these steps, you can create an intuitive and engaging multi-step form that guides users smoothly through the data collection process 🥳
Home
Live Chat
What's New
Help
Available Mon - Fri
9AM - 5PM AEDT
Hey builder!
How can we help?
General
Find help for general questions related to our product or services.
Accounts & Billing
Get in touch with questions about your account.
FramerForms
Get support with FramerForms
Framer Career Accelerator
Get support with Framer Career Accelerator
Superfields
Get support with Superfields
Thenty
Get support with Thenty
VideoFrame
Get support with VideoFrame