Create a multi-step form in Webflow

Break a long form into pages with the New page block, add a progress bar and auto-jump, then embed it on a Webflow site with a Code Embed element.

Webflow's own forms collect everything on one screen. Ask for a multi-step form, with a page for each group of questions and a progress bar across the top, and the builder has nothing to offer.

Tinyform builds forms with pages, and a form with pages goes into a Webflow site the same way a one-page form does: one snippet in a Code Embed element.

The problem: Webflow does not do multi-step forms

Webflow's form builder is made for simple forms: one page, basic inputs, one submit. There are no page breaks, no progress bar and no transitions between steps. To have those on a Webflow site you embed a form from a builder that has them.

How to build the multi-step form

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

To show 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 below it is what respondents see after submitting, and the divider's button becomes the submit button. Text, an image, an embedded video: anything can go on it. Create Thank You pages has the options.

Auto-jump to the next page

When a page holds one choice question, the visitor can move on the moment they pick an answer, without a Next button. Auto-jump works for multiple choice, dropdown, rating and linear scale questions; a page holding any other type waits for the button.

It is off by default. To turn it on:

Open the form's settings
Open the form and go to its Settings tab.
Find the Behavior section
Scroll down to Behavior.
Turn on auto-jump
Switch on Auto-jump to next page.

Embed the multi-step form in Webflow

Press Publish in the editor and open the form's Share tab. Embed Form opens the embed dialog, where the embed type is chosen at the top.

Leave the type on Standard, check the switches, and press Get the code. Keep Dynamic height on: every page of the form has a different height, and that switch is what lets the frame follow it instead of scrolling inside itself.

Add a Code Embed element
In Webflow, drag a Code Embed element into your layout, or start a blank page for a full-width form.
Paste the snippet
Paste the code into the HTML embed editor that opens and press Save & Close.
Publish
Press Publish at the top right, choose the domains, and open the live page to try the form.

Embed forms on Webflow goes through the Webflow side with screenshots.

Send the submissions on

Every fill lands in the form's Submissions tab. To move it further, a webhook posts each submission to an address of your choosing as it is made, and the REST API reads them back. Direct connections to the tools below are on the way; the Integrations section shows what is live today.