Help Centre

How can we help?

Search Docs

How to add Logic to Multi-Step Forms in Framer

How to add Logic to Multi-Step Forms in Framer

How to add Logic to Multi-Step Forms in Framer

  1. Make your form a multi-step form

If you haven't already turned your form into a multi-step form, follow these instructions here to learn how. Logic is based on form pages, so your form will need to be a multi-step form first.

  1. Name each page that will be used for logic

Routing between different pages is based on the pages' names, so give a unique name to each page that will be used with logic.

  1. Add the logic component to a page

Copy and paste the logic config component into a page in your form.The component is only visible in the editor, and is hidden in the preview and published website.

  1. Add conditions to the logic component

For each condition, write the input's name, input type, a condition and value, and the name of the page to go to if the condition is met. When the next page button is pressed on a page, each condition in the list will be checked sequentially to determine which page to navigate to.

  1. Add a default page

When none of the conditions are met, it will go to the default page set in the "Default" option on the logic component. If no default page name is added, it will go to the next page in the list.

Repeat these steps for any page you want to add logic toYou can add logic to as many pages as you want in your form. Just make sure that each page only has one Logic Config component.Any page that doesn't have a Logic Config will act like a regular multi-step form page by navigating to the next page in the list.

  1. Define a list of end pages

If your logic form has multiple ending pages, select the Multi-Step Form component at the top of your form, switch "End Page" to "Custom Pages", and write the names of the ending pages.The submit button is shown and the next page button is hidden on end pages.If your form does not have multiple ending pages, leave end page as "Last Page" and the submit button will only be visible on the last page.

  1. Test your form

Try filling out your form with different values to make sure all the logic conditions are set up correctly.

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?