How to Create a WordPress Multi Page Form in 5 Steps

Why does nobody finish your form? It started as a quick sign-up and grew a question at a time: contact details, availability, an emergency contact, “anything else we should know?” Now it scrolls for days.

People open it, take one look at that wall, and leave. Others make it halfway, and you never hear from them again. We’ve built a few of those ourselves.

Yes, it’s frustrating, but it’s also fixable. Below is how to create a WordPress multi page form in five steps, turning that one long form into short, named pages with Next and Previous buttons. All it takes is one add-on for the free Ninja Forms plugin, and no code.

What you’ll need

• Ninja Forms (the free WordPress plugin)
• The Multi Step Forms add-on
• The Conditional Logic add-on (optional, only to skip a page)
• The Layout & Styles add-on (optional, only to style the progress bar)

Here’s how to create a WordPress multi page form in 5 steps

Every part you add in the builder becomes one page of your multi-step form, and Ninja Forms adds the Next and Previous buttons for you. If you can drag a field, you can do this.

We’ll use a volunteer application for a llama sanctuary as the example. It’s a classic long WordPress form, and it splits nicely into four pages.

1. Open your long form in the Ninja Forms builder

In your WordPress admin, go to Ninja Forms > Dashboard and click the form you want to turn into a multi-step form. Starting from scratch? Ninja Forms > Add New Form lets you create one just as easily.

On the Form Fields tab, look at the bottom of the builder. With Multi Step Forms active, a bar runs along there with one tab for each part of your multi-step form. A form that hasn’t been split yet has just one.

2. Add a part for each page you want visitors to see

Still on the Form Fields tab, click the last part’s tab in that bottom bar. Then click the grey circle with a + at the right edge of the canvas, and a new part tab appears in the bar. Repeat for every page you want in your multi-step form.

On any part but the last, that same spot shows a grey > arrow instead, with a grey < arrow on the left. Those move you between parts.

To fill a part, drag fields onto its tab in the bottom bar, or click into the part and add new ones with the blue (+) icon. One rule here: the Submit button goes on the last part. If your form already has one, drag it there.

Not sure how to group your questions? Here’s a guide to what to put on each page of a multi-step form. Our llama application keeps contact details on page one, availability on page two, animal experience on page three, and a final check on page four.

3. Name each part so visitors know where they are

Click the active part’s tab in the bottom bar to open its drawer, then type a short name in Part Title. The same drawer has Remove Part and Duplicate Part if you need them.

Not sure how to name them? Say what the page is.

On a multi-step form, the title becomes the page’s heading and its name in the breadcrumbs, so “About You” beats “Step 1” every time. Ours are About You, Your Availability, Animal Experience, and Review and Submit.

4. Show page titles and check each page before visitors move on

Click the Advanced tab, then the Multi-Part tile. These settings in the drawer decide what visitors see on your multi-step form:

• Validate each part is off by default. Turn it on. Visitors can’t move to the next page with a required field empty: Next stays put and shows “This is a required field.” under each empty one.
• Show Part Titles is off by default. Turn it on, so each page carries the title you gave it as a heading.
• Show Breadcrumbs is already on. It’s a row of your part titles across the top, with the current page marked, showing every step by name.
• Show Progress Bar is already on. It’s a progress bar across the top that fills as each page is completed.

Our advice: switch on both of the ones that start off, and leave breadcrumbs and the progress bar on, too. Without Validate each part, a visitor can sail past a required question on page one and only find out when Submit refuses to go through on page four. That’s the quickest way to lose someone on a multi-step form.

Want different words on the buttons? Previous Button Label and Next Button Label set one label for the whole form, and leaving them blank shows “Previous” and “Next”.

The STYLES section at the bottom of this drawer restyles the progress bar, and you’ll find how to use it below. For the rest, here’s every Multi-Part setting.

One more kindness for your visitors: tell them up front how many pages there are. Our application opens with an HTML field on page one that reads “This application has three short steps: about you, your availability, and a final check of your answers.” On a multi-page form, titles and breadcrumbs let every visitor read where they are in plain words, and the W3C’s guide to multi-page forms has more ideas like it.

5. Publish your form and put it on a page

Click PUBLISH at the top right of the builder. Then add the form to a WordPress page with the Ninja Forms block, which the plugin adds to your WordPress editor, or with the shortcode [ninja_form id=X] and your form’s ID in place of X.

New to that part? Here’s how to add a form to any page.

Open the page and click through every page of your multi-step form once, start to finish, like a visitor would.

That’s all there is to it. Your wall of questions is now a WordPress multi-page form that visitors can take one short page at a time.

Optional extras: a summary page, skipping a page, and a styled progress bar

Those five steps were all you needed, and your WordPress multi page form already works. Each of these adds something some forms need, so pick what fits yours.

How to make a summary page on your multi-part form (no extra add-on)

A summary page lets visitors check their answers before they submit a multi-step form. You have it easy here: no extra plugin, just one last part with an HTML field and the Submit button on it.

Create that last part and title it something like Review and Submit. Click the HTML field to open its field settings window. Its Default Value box is a text editor with a merge tags button in the toolbar.

Insert one merge tag per answer and put your own words around them. The tags fill in with the visitor’s answers live, as soon as they reach that page.

Ours starts with “Please check your answers. Use Previous to go back and change anything.” and then lists Name, Email, Phone, Days you can help, Role you would like, and Worked with animals before.

If a conditional rule skips a page (more on that next), its answers show up blank on the summary page. Keep your summary lines to questions everyone answers and the page always looks complete.

How to skip a page some visitors don’t need (Conditional Logic add-on)

Not every visitor needs every page of a multi-step form. On our llama application, the Animal Experience page only makes sense for people who’ve worked with animals. With the Conditional Logic add-on, one rule shows that page to the people who need it and hides it from everyone else.

Here’s how to build it. On the Advanced tab, click the Conditional Logic tile, then Add New Condition, and fill in the rows:

• When: your question, Has Selected, and the answer that should show the page.
• Do: the part’s title, then Show Part. Parts are listed by title under “Parts”, above the fields.
• If the Condition Is Not Met: click the blue (+) icon under that heading, then pick the same part and Hide Part.

Don’t skip that last row. It doesn’t fill in on its own, and without it the page never hides.

Here’s our rule: When “Have you worked with animals before?” Has Selected “Yes”, Do “Animal Experience” Show Part, and If the Condition Is Not Met, “Animal Experience” Hide Part.

Visitors who answer No never see that page. Its breadcrumb and its share of the progress bar disappear too, and its required fields don’t block Submit.

Give visitors a heads-up, too: a description under the question, like our “If you answer Yes, we add a short step about your experience.”, tells them an answer adds a page before it happens.

Want more conditional page tricks? Here’s the full walkthrough.

How to style the progress bar on your multi-page form

The progress bar on a multi-step form looks fine out of the box. If you’d like it in your own colours, the Layout & Styles add-on adds a STYLES section at the bottom of the Multi-Part drawer (Advanced tab, Multi-Part tile). Expand it and you’ll find the sections for the progress bar:

• Progress Bar Container Styles is the empty track. It has Background, Padding, Margin, Width, Height, Border (None, Solid, Dashed or Dotted), Border Width and Border color.
• Progress Bar Fill Styles is the part that fills. It has the same controls without Width.

Sizes use sliders in px, em or rem, with % for width. Our progress bar has a light grey track (#e4e4e4) and a green fill (#2e7d32), both 14px tall. The other sections in STYLES cover the breadcrumbs, part titles and Previous and Next buttons the same way.

Need rounded corners or a gradient on your progress bar? Switch on the CSS mode toggle at the top of STYLES, then Show Advanced CSS Properties, and write your rules in Advanced CSS. Reset styles clears a section if you change your mind.

Whatever colours you pick, keep text and controls at a contrast of at least 4.5 to 1, and pick a fill that stands apart from its track. The progress bar should never be the only way a visitor can tell how far along they are, which is one more reason to leave titles and breadcrumbs on.

Is a multi-page form the same as a multi-step form?

Yes. A multi-page form, a multi-step form and a multi-part form are the same thing: one form split into pages that a visitor moves through in order, with Next and Previous buttons. Ninja Forms calls its add-on Multi Step Forms, and the builder calls each page a part.

Whichever name you search for, the five steps above are how to create a multi-step form in WordPress. Still choosing a WordPress form plugin? You can compare multi-step form builders side by side.

What your visitors see on each page of a WordPress multi-page form

Here’s what your visitors see on page one of our multi-page llama application:

• Breadcrumbs list every page by its title, with the current one marked. A conditional page that a rule skips drops out of the row.
• The part title sits above the fields as the page’s heading.
• The progress bar fills as each page of the multi-step form is completed. It sits empty on page one and never reaches 100% before Submit, because it counts finished pages.
• Next and Previous work from the keyboard. Tab from the last field reaches Next, and Enter moves on.
• Errors are in words. An empty required field says “This is a required field.” right under it.

Turn your long form into a WordPress multi-page form today

Like we said at the top, a long WordPress form doesn’t have to lose people halfway. Split it into named pages and the same questions feel a lot lighter, one short page at a time. You can now build that in WordPress in five steps, and add a summary page, a page that skips itself, or a progress bar in your own colours whenever you like.

Our take: if your form scrolls, it’s ready for pages. No page builder plugin, no developer, no code. Pick up the Multi Step Forms add-on and give your visitors a multi-step form they’ll want to finish.