Create Multi-Page Forms Your Audience Will Love

Techie Mamma is reader supported. When you buy through links on our site, we may earn a small commission at no additional cost to you. As an Amazon Affiliate I earn from qualifying purchases. I only recommend products and services that I think will help you on your Mompreneur journey and all opinions expressed here are our own. You can read my full disclaimer here.

Share or save for later

[ivory-search id="126528" title="AJAX Search Form"]

Sometimes splitting up forms into multiple pages helps UI. Multi-page forms can encourage focus, reduce abandonment, and with conditional fields only collect what you need. Whether you are creating an application form, order form, surveys, or more, make things simple and easy for your audience.

In This Post

Whether you want a Multi-Step, Multi-Part, Multi-Page form, WPForms will bring you this functionality in a most beautiful and super simple way.

Does a Multi-Page Form Really Help?

Yes! Multi-Page forms can help focus, reduce abandonment, and with the addition of conditional fields can powerfully only collect the information you really need. We all fill out forms all day long. In a typical day, I probably tab through 100s of forms. Every time you log into a website, every time you order a pizza, every time you fill in a survey or poll, these are all forms. They are a staple in our web-driven life. We need to make sure that we don’t cause form fatigue and have our users abandon our forms because they were too much.

Multi-step forms can help with organization and clarity of what will be included in the form. If you have a long application form or survey form, dividing the form into various sections can help visually inform the user that the content is different. With conditional logic, you can also show different pages of the form based on which answers users provide. The rule of thumb is to break up forms that have more than 3 or 4 form fields.

How-To Create a Multi-Step Form

Depending on what form tool you are using in WordPress will determine exactly how this is done. Forminator Pro has a field called “Page Break” in their form builder. Another popular form builder, Gravity Forms, includes a “Page” as a field. WPForms. likely the sleekest and user-friendly form builder also has “Page Break” as the field. In order to use the Page Break feature in WPForms, you must have the Basic or higher version of the plugin.

The video below goes from setup to finished page creating a Multi-Page form. WPForms makes the process simple, easy, and even fun with the teddy bear waving hi! If you shy away from videos check out the written guide below the video.

Step 1: Create a Form in WordPress

Navigate to the WPForms Dashboard once you have the plugin installed, activated, and licensed.

In the Forms Dashboard create a blank form.

A blank form allows you to add fields as needed. Starting from a simple form like a contact form works well as well.

Step 2: Add Fields to the Form

Add a few fields to the first page of your form. Once you are at a location for a page break, add the page break field. Alternatively, you can add all fields and then decide where you want the breaks.

Step 3: Add Page Break Field

Add the Page Break field located in the Fancy Fields section of WPForms. Make sure to have a licensed version of WPForms as these fields are grayed out in WPForms Lite.

Step 4: Finish Adding Fields to the Multi-Step Form

Once you add the page break, add more fields to the second, third, fourth, etc. pages.

Step 5: Finish Saving & Embedding

Continue setting up settings, saving, and embedding your form as needed.

Multi-Page Form Quick Printable Guide

Bonus Tip: Customize Your Multi-Page Form with Progress Bars

WPForms is always striving to make things super easy. They have included three different breadcrumb style progress bars for the multi-page forms. They include:

  1. Connectors: shows page titles and a connecting bar in each part of the multi-page form.
  2. Circles: shows one circle and page title per page on your multi-page form.
  3. Progress Bar: indicates the progress of the form as the user fills it out. This is the default style shown in the video above.

Resources