Want to split your form into multiple pages? A multi page form can let 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. Create a Multi Page Form
To get started, you’ll need to create a new form or edit an existing form.
Once the form builder is open, go ahead and add any fields you’d like included in your form. Then, you can drag a Page Break field over 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 the field and drag it wherever you’d like.
2. Customize 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 screen will open. From here, you can edit the Page Title and use Next Label to change the button text.
You can also choose to enable the Previous button by clicking the Display Previous toggle. This is hidden by default for optimal conversions, but can be enabled on a page by page basis.
After the previous button is enabled, you’ll see the Previous Label option to change this button text.
Note: Page Break field settings are handled separately for each form page. If 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
Now that you’ve added a Page Break, you may notice that a First Page area has been added to the very top of your form. You can click on First Page / Progress Indicator to select a Progress Indicator type and color, as well as set a title for your form’s first page.
A Progress Indicator shows the user how many pages are in your form and which page they are currently on. In the Progress Indicator dropdown you can hide this feature or select from three formats: Progress Bar, Circles, or Connector.
Progress Bar:
Circles:
Connector:
Page Break Advanced Options
Now that you’ve chosen the style of your Progress Indicator, you can customize even more Page Break settings. To access these additional settings, you’ll need to scroll towards the bottom of the Field Options panel. Then, click on Advanced Options section to open it.
Under Advanced Options, you’ll find two settings:
- Page Navigation Alignment: Choose where your form navigation buttons will be placed (Left, Right, Center, or Split).
- Disable Scroll Animation: Prevent automatic scrolling to top of page when user clicks the “Next” button.
That’s it! We hope this article helped you learn how to create a multi page form 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.