### [Creating Multi-Page Forms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/)

**Published:** February 19, 2024
**Author:** David Ozokoye

**Excerpt:** Learn how to split your form into multiple pages with a progress bar.

**Content:**

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.

This tutorial will show you how to easily create multi-page forms with WPForms.

- [Creating a Multi-Page Form](#create-form)
- [Customizing Form Page Settings](#customize)
- [Frequently Asked Questions](#faq)

---

First, make sure WPForms is [installed and activated](https://wpforms.com/docs/install-wpforms-plugin/) on your site. Then, you’ll need to [create a new form](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form") or edit an existing one.

## 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.

Want to get started easily? Check out our ready-to-use [Multi-Page Contact Form Template](https://wpforms.com/templates/multi-page-contact-form-template/).

![Adding a Page Break field to a form](https://wpforms.com/wp-content/uploads/2020/02/adding-page-break-field.gif)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.

## 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](https://wpforms.com/wp-content/uploads/2020/02/page-break-page-title.png)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](https://wpforms.com/wp-content/uploads/2020/02/page-break-next-label.png)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](https://wpforms.com/wp-content/uploads/2020/02/page-break-display-previous.png)**Note:** The Display Previous toggle only appears if you have more than one Page Break field on your form. It won’t show on the first Page Break field on your form.

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

![Editing the Previous button text](https://wpforms.com/wp-content/uploads/2020/02/page-break-previous-label.png)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.

#### Adding a Previous Button to the Last Page of Your 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](https://wpforms.com/wp-content/uploads/2020/02/page-break-last-page-options.png)This will show the **Display Previous** toggle in the Field Options panel.

![Displaying the Previous button the last page of a multi-page form](https://wpforms.com/wp-content/uploads/2020/02/last-page-display-previous.png)Turn it on to customize your button text as described above.

### 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](https://wpforms.com/wp-content/uploads/2020/02/first-page-break-field.png)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](https://wpforms.com/wp-content/uploads/2020/02/disable-progress-indicator.png)Or, you may choose from the three Progress Indicator styles: **Progress Bar**, **Circles**, or **Connector**.

Progress Bar:

![The bar Progress Indicator](https://wpforms.com/wp-content/uploads/2020/02/progress-indicator-bar-2.png)Here’s a live preview with the Progress Bar format.

Please enable JavaScript in your browser to complete this form.

Suggestion Form – Step 1 of 3

##### Try this Form Demo!

Name \*First

Last

Email \*

Next

Which department do you have a suggestion for? \*- Sales
- Customer Support
- Product Development
- Other

If other… \*

PreviousNext

Subject \*

Comment or Message \*

Previous

Submit![Loading](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 Circles:

![The circles Progress Indicator](https://wpforms.com/wp-content/uploads/2020/02/progress-indicator-circles-1.png)Connector:

![The connector Progress Indicator](https://wpforms.com/wp-content/uploads/2020/02/progress-indicator-connector-1.png)**Note**: The Connector progress indicator may not display correctly on mobile devices. For better results across all devices, including mobile, we recommend using the Progress Bar or Circles options.

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](https://wpforms.com/wp-content/uploads/2020/02/progress-indicator-color.png)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](https://wpforms.com/wp-content/uploads/2020/02/first-page-title.png)### Allowing Visitors to Navigate Between Pages

If you’d like visitors to move between pages by clicking the progress indicator, select either **Circles** or **Connector** from the Progress Indicator dropdown.

Then, turn on the **Allow Page Navigation** option.

![](https://wpforms.com/wp-content/uploads/2024/02/allow-page-navigation-page-break-field-1024x536.png)When this setting is enabled, visitors can click a page number or connector step in the progress indicator to jump to a different page in your form.

Any information a visitor has already entered into the form will remain in place while they move between pages before submitting the form.

**Note**: The **Allow Page Navigation** option is only available when the Progress Indicator style is set to **Circles** or **Connector**. If you choose **Progress Bar**, the setting is unavailable.

### 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](https://wpforms.com/wp-content/uploads/2020/02/first-page-advanced-options.png)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](https://wpforms.com/wp-content/uploads/2020/02/page-navigation-alignment.png)For detailed guidance on adding animation effects to page break transitions in your form, see our [developer documentation](https://wpforms.com/developers/how-to-add-animation-effects-to-page-break-transitions/).

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](https://wpforms.com/wp-content/uploads/2020/02/page-break-field-advanced-css-classes.png)We only recommend adding custom CSS to your forms if you’re an experienced user. Check out our [developer documentation](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/) 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.

Please be aware that some of the FAQs require advanced functionality, such as adding code to your site, and is therefore recommended for developers.

#### Can I skip empty pages in my multi-page form?

Yes, you can skip empty pages in multi-page forms. To find out how, check out [our guide on skipping page breaks when using conditional logic.](https://wpforms.com/developers/how-to-skip-page-breaks-when-using-conditional-logic/)

#### Can I set my multi-page form to advance to the next page automatically based on a selection?

Yes, you can configure your multi-page form to move to the next page automatically when a user makes a selection. For detailed instructions on setting this up, please refer to our [developer documentation](https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/).

#### Can I delete a Page Break field after adding it to my form?

Yes, you can delete a Page Break field, though its delete icon appears in a different location than other fields. While most form fields show their trash can icon on the right edge when you hover over them, the Page Break field’s delete icon appears next to the Next button.

To remove a Page Break field, simply hover over it in the preview area and click the **trash** icon next to the **Next** button. This will delete the Page Break and merge the pages together.

![Delete page break field](https://wpforms.com/wp-content/uploads/2025/02/delete-page-break-field-1024x573.png)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](https://wpforms.com/docs/how-to-add-extra-text-and-descriptions-to-forms/ "How to Add Extra Text and Descriptions to Forms") for more details.

**Categories:** Functionality, Form Creation

---