Products

Courses

Resources

Products

Courses

Resources

Help Centre

How can we help?

Search Docs

How to Create Multi-Step Forms with FramerForms

How to Create Multi-Step Forms with FramerForms

How to Create Multi-Step Forms with FramerForms

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 🥳

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!

Building the Framerverse 🚀 - an ecosystem of products & education for Framer.

© 2024 Insert Frame Pty LTD

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