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.
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.
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.
You can also customize the text for the button users will click to go to the next page in the Next Label field.
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.
When the Previous button is enabled, the Previous Label option will appear so you can customize the 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.
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.
Or, you may choose from the three Progress Indicator styles: Progress Bar, Circles, or Connector.
Progress Bar:
Circles:
Connector:
To select a color for your Progress Indicator, use the color picker or enter the HEX code for the color you want to use.
Finally, enter a name for your form’s first page in the Page Title field.
Page Break Advanced Options
In the First Page field options, you can customize even more Page Break settings by clicking on the Advanced tab.
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.
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.
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.
This will show the Display Previous toggle in the Field Options panel.
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.