### [How to Customize the Page Break Buttons](https://wpforms.com/developers/how-to-customize-the-page-break-buttons/)

**Published:** January 24, 2024
**Author:** Dimitris Mitsis

**Excerpt:** This tutorial will show you how to CSS can be used for customizing your Page Break buttons in your forms. 

**Content:**

## Introduction

Are you eager to give your WPForms a unique touch by customizing the **Page Break** buttons? Look no further! In this tutorial, we’ll guide you through the process of using CSS to personalize the appearance of your buttons. With a range of CSS snippets, you can easily achieve the look you desire for a more tailored and visually appealing form.

## Creating your multi-page form

Let’s kick off by crafting a multi-page form. If you’re unsure about the process and could use some guidance, feel free to refer to this handy documentation on [Creating Multi-Page Forms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/ "Creating Multi-Page Forms").

In today’s tutorial, we’re focusing on building a form designed to gather blog post ideas.

![begin by creating your form, adding your fields and place your page breaks where you want them to appear](https://wpforms.com/wp-content/uploads/2024/01/wpforms-pagebreak-create-form.jpg)

## Enabling Display Previous

After incorporating your **Page Break** buttons, don’t forget to activate the **Display Previous** option on each of these breaks. This ensures that your visitors can navigate back to review and make edits before finalizing the form.

Note that the first **Page Break** field doesn’t showcase this option. However, it’s available for every subsequent page break, including the last one.

![remember to go through and enable the Display Previous option on your page breaks](https://wpforms.com/wp-content/uploads/2024/01/wpforms-pagebreak-enable-previous.jpg)

When using the **Next** and **Previous** buttons for your form, by default, these buttons will already appear on the same line.

![default view of next and previous buttons](https://wpforms.com/wp-content/uploads/2024/01/wpforms-pagebreak-default.jpg)

But what if we wanted to center them, or make them larger buttons? This is where CSS comes into play!

## Centering the buttons

Let us now add some CSS to center the **Next** and **Previous** buttons on our form.

If you’re not sure where or how to add CSS to your site, [please review this tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms").

```

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}
```

This CSS will only be applied to the form ID **605**. You will need to update this form ID to match your own ID. If you’re not sure where to find your form ID, [please review this guide](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

If you wanted to use CSS such as this to be applied to **all** forms, you would use this CSS instead.

```

.wpforms-pagebreak-left {
text-align: center !important;
}
```

![after adding the CSS you can see the next and previous buttons are centered](https://wpforms.com/wp-content/uploads/2024/01/new-wpforms-center-pagebreak-copy.jpg)

## Creating larger buttons

For this section, we’re going to make our buttons larger while also using the CSS above to keep the buttons centered.

```

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}
```

To make this change for all forms, use this CSS instead.

```

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}
```

![with this CSS you can see the larger buttons but still centered](https://wpforms.com/wp-content/uploads/2024/01/wpforms-larger-centered-pagebreak-buttons.jpg)

## Aligning the last buttons

With the multi-page form and using the **Previous** buttons, the final page of the form will show the final **Previous** button is above the Submit button. For our tutorial, we want to align these buttons to be on the same line.

So using all of the CSS we’ve used so far, let’s pull this all together.

```

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}
```

And as with the other CSS above, if you want this for all forms, you would use this CSS.

```

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}
```

![with this CSS you can now see that the final previous button and the submit button are not only larger but also aligned on the same line](https://wpforms.com/wp-content/uploads/2024/01/wpforms-pagebreak-buttons-submit.jpg)

And that’s all you need to customize the look and feel of the multi-page buttons. Would you like to also move to the next page automatically based on a question for your form? Take a look at our tutorial on [How to Move to the Next Page Automatically](https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/ "How to Move to the Next Page Automatically").

**Categories:** Tutorials

**Tags:** CSS, Multi Page

---