How to create a multi-step form for WordPress

Split a long form into pages with the New page block, add a progress bar, and embed it on a WordPress page with the Standard snippet.

A multi-step form shows one page of questions at a time, with a button to move on. With Tinyform you build the pages in the editor and embed the result on a WordPress page in a few minutes, with no plugin and nothing to configure on the WordPress side.

Why split a form into steps

A long form feels shorter when it arrives one page at a time. Respondents deal with a few questions, press a button, and see the next few, which is easier to finish than a single scroll of thirty fields.

It suits the forms people tend to abandon halfway:

• Lead capture forms
• Job applications
• Event registrations
• Product onboarding
• Customer surveys

And because the form runs on your Tinyform install rather than inside WordPress, the site carries none of the weight.

Add a multi-step form to WordPress

Three steps: build the pages, tune them, embed the result.

1. Build the pages in the editor

Open the form at /forms/<id>/edit. Type / where the first step should end and pick New page. Everything below that block becomes the next page.

Repeat for each step. Create a multi-page form covers the block in more detail.

2. Tune the steps

A few things are worth setting before you embed:

• Button labels. Each page break carries its own button label, so a step can say Continue, Next or anything else you type.
• Reorder. Drag blocks between pages, or drag a New page block itself, to change where a step begins.
• Progress bar. Turn on Progress bar under Settings, in the General section, so respondents see how far along they are. See Progress bar.
• Auto-jump. Auto-jump to next page, under Settings in the Behavior section, moves to the next page as soon as a question is answered. It works only when a page holds one multiple choice, dropdown, rating or linear scale question.
• Skip steps with logic. Conditional logic can jump past pages that do not apply to a given respondent.
• Dress the pages. Headings, dividers and images are blocks like any other and can sit on any page.

The form saves as you edit; there is no shortcode to generate and nothing to register in WordPress.

3. Embed it on WordPress

1. Get the snippet

   On the form's Share tab, under Embed Form, choose Standard, click Get the code and copy the snippet.

2. Keep Dynamic height on

   Pages differ in length, and Dynamic height is what lets the frame grow and shrink as the respondent moves between them. It is on by default; leave it that way.

3. Paste into a Custom HTML block

   In the WordPress editor, add a Custom HTML block where the form belongs and paste the snippet. Embed forms on WordPress has the same steps with screenshots.

The multi-step form is live on the WordPress page.

What the embedded form can do

Everything the form does on its own page it does inside the frame:

• Conditional logic that shows, hides or skips pages
• A progress bar and auto-jump between pages
• Hidden fields and pre-filled answers, read off the WordPress page's own address
• Partial submissions, so an abandoned step is not lost entirely
• File uploads and electronic signatures
• Webhooks that post each response to a URL you choose

An embedded form beside a WordPress form plugin

Try it

Build the pages at /forms/<id>/edit, publish, and paste the Standard snippet into a Custom HTML block. That is the whole integration.

Back to Embed guides.