Add the Multi-Step Form component to the top of your form

Place the Multi-Step Form component at the top of your form structure

This invisible component powers the entire multi-step functionality

Visible only in editor mode, completely hidden on live sites

Create a stack named “Pages” inside your form

1. Inside your form, create a stack and name it “Pages”.

2. This special layer name tells FramerForms to treat contents as separate screens

3. During editing: all pages visible for easy management

4. On published site: only one page appears at a time

5. Tip: Elements outside "Pages" remain visible across all steps

Create a stack for each page in your form

Organize your form into logical sections

1. Create a stack inside "Pages" for each form step

2. Group related form inputs within each page stack

3. Place your submit button only on the final page

4. Keep forms focused with 3-5 inputs per page maximum

Add Previous and Next Page Buttons

1. Add Previous and Next buttons outside the "Pages" layer

2. Previous button automatically hides on first page

3. Next button automatically hides on last page

4. Position consistently for improved user experience

Customize Your Form

Progress Bar: Shows completion percentage visually

• Navigation Dots: Displays current position with interactive dots

• Current Page Label: Shows "Step 2 of 5" with customizable formatting

• Place these elements anywhere in your form layout

Add Logic (Optional)

If you need to show different inputs based on previous answers, you can add logic to your form: Learn more here.

Multi-step forms typically increase completion compared to single-page forms.