How can we help?

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 🥳