How to Create Multi-Page Forms in WPForms

Want to split your form into multiple pages? A multi-page form lets you break down lengthy forms into different sections, making them less overwhelming and improving user experience.

In this tutorial, we’ll show you how to easily create multi-page forms with WPForms.

  1. Creating a Multi-Page Form
  2. Customizing Form Page Settings
  3. Frequently Asked Questions


First, make sure WPForms is installed and activated on your site. Then you’ll need to create a new form or edit an existing one.

1. Creating a Multi-Page Form

Once the form builder is open, go ahead and add any fields you’d like to include in your form. Then drag a Page Break field into the preview area and drop it wherever you’d like to create a new form page.

Adding a Page Break field to a form

Each Page Break field that you add will split the form into additional pages, and you can add as many pages as needed. To move any Page Break to a different part of your form, simply click on it in the preview area and drag it wherever you’d like.

2. Customizing Form Page Settings

WPForms offers several ways to customize your multi-page forms, including adding page titles, choosing a progress bar style, and more.

Page Titles, Button Text, and Previous Buttons

If you click on a Page Break field in the preview area of the form builder, its Field Options panel will open. From here, you can edit the Page Title.

Changing the page title

You can also customize the text for the button users will click to go to the next page in the Next Label field.

Changing the Next button text

If you would like to enable the Previous button as well, toggle on the Display Previous option. This navigation button is hidden by default to help optimize conversions, but you can show it to users on a page-by-page basis.

Enabling the Previous button

When the Previous button is enabled, the Previous Label option will appear so you can customize the button text.

Editing the Previous button text

Note: Page Break field options are handled separately for each form page. If you’re using more than one Page Break in your form, you may want to apply customizations to the field for each page.

First Page Settings and Progress Bar Styles

Once you’ve added a Page Break, you may notice that a First Page area has appeared at the very top of your form in the preview area. Click on First Page / Progress Indicator to access more options for your multi-page form.

Opening the field options for the first page in a multi-page form

First, customize your Progress Indicator. This feature shows users how many pages are in your form and which page they are currently on. In the Progress Indicator dropdown, you can hide this feature by selecting None.

Disabling the page indicator for a multi-page form

Or, you may choose from the three Progress Indicator styles: Progress Bar, Circles, or Connector.

Progress Bar:

The bar Progress Indicator

Circles:

The circles Progress Indicator

Connector:

The connector Progress Indicator

To select a color for your Progress Indicator, use the color picker or enter the HEX code for the color you want to use.

Changing the Progress Indicator color

Finally, enter a name for your form’s first page in the Page Title field.

Changing the title of the first page in a multi-page form

Page Break Advanced Options

In the First Page field options, you can customize even more Page Break settings by clicking on the  Advanced tab.

Accessing the advanced options for the first page of a multi-page form

Here, you’ll find the following settings:

  • Page Navigation Alignment: Choose where to place your form navigation buttons (Left, Right, Center, or Split).
  • Disable Scroll Animation: Prevent automatic scrolling to the top of the page when users click the Next button.

The Page Break field navigation alignment option

You can also add CSS classes here. This custom code will only apply to the first Page Break field in your form. To add CSS classes to other Page Break fields, click on the relevant field in the preview area and select the Advanced tab in the Field Options panel.

The Page Break field CSS classes option

Note: We only recommend adding custom CSS to your forms if you’re an experienced user. Check out our developer documentation for more information on customizing your forms with code.

Frequently Asked Questions

Below, we’ve answered some of the most common questions we receive regarding multi-page forms.

How do I add a Previous button to the last page of my multi-page form?

To display a Previous button on the last page of your form, click on the divider below the last field in the preview area of the form builder.

Opening the last page options for a multi-page form

This will show the Display Previous toggle in the Field Options panel.

Displaying the Previous button the last page of a multi-page form

Turn it on to customize your button text as described above.

That’s it! You can now create multi-page forms with WPForms.

Next, would you like to learn how to add extra text or instructions to your form? Be sure to check out our tutorial on adding non-input text for more details.