Create a multi-step form in Framer

Split a form into pages with the New page block, add a thank-you page and auto-jump, then embed the result on a Framer site.

Framer's form component collects everything on one screen. There is no way to break a long form into steps, show a progress bar or move a visitor from one page to the next. Tinyform does all of that, and a form built with pages embeds in Framer the same way a one-page form does.

Why use a multi-page form?

A long form on one screen looks like work. Cut into pages, the same questions feel shorter, each page has a single focus, and more people reach the end.

Pages suit:

• Onboarding flows
• Surveys and quizzes
• Sign-up and demo request forms
• Lead qualification
• Event registrations

The problem: Framer does not do multi-step forms

Framer's builder makes one-page forms with basic inputs and a single submit. It has no page breaks, no progress bar and no page transitions. To get that on a Framer site you embed a form from a builder that has them.

How to create pages in Tinyform

Open the editor at /forms/<id>/edit. On an empty line, type / and pick New page, or type page to filter the list down to it. A page divider with a page label is inserted, and every block you place under the line belongs to the new page.

For a form that asks one question per screen, insert a New page after every question. There is no limit on the number of pages or on how many questions a page holds.

The last page divider carries a ‘Thank you’ page switch. Turn it on and the page under it becomes what respondents see after submitting, and the divider's button becomes the submit button. Put anything on it: a message, an image, an embedded video. Create Thank You pages covers the options.

Auto-jump to the next page

When a page holds a single choice question, the visitor can be moved to the next page the moment they pick an answer, with no Next button to press. This works for multiple choice, dropdown, rating and linear scale questions; a page with any other question type waits for the button.

Auto-jump is off by default. To turn it on:

1. Open the form's settings

   Open the form and go to its Settings tab.

2. Find the Behavior section

   Scroll down to Behavior.

3. Turn on auto-jump

   Switch on Auto-jump to next page.

Embed the multi-step form in Framer

1. Publish and copy the snippet

   Press Publish, open the Share tab, choose Embed Form and press Get the code on the Standard embed. Keep Dynamic height on: each page has a different height, and the switch is what lets the frame follow it instead of scrolling inside itself.

2. Paste it into Framer

   Insert an Embed component in Framer, set it to HTML and paste the snippet. If you prefer a URL, press Copy embed link instead and set the component to URL.

3. Publish the site

   Publish in Framer. The form runs on the page, one step at a time.

That is all there is to it. The Framer side is covered in more detail in Embed forms on Framer.