How to Customize the Page Break Buttons

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.

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

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

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

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.

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.

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

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

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

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.