How to Customize WPForms Section Divider Using CSS

Overview

Would you like to customize the section divider in WPForms? Using a little CSS you can change the style of not just the divider itself but also the text that is used with the divider. In this tutorial, we’ll walk you through the steps needed to customize the styling of the Section Divider form field.

Creating the form

To begin, we’ll start by creating a form, adding our fields, and then breaking up these fields with the Section Divider.

If you need any assistance in creating your form, please see this documentation.

For the purpose of this documentation, we’re creating a form that will capture personal information, medical history, and primary insurance information. Because the form will be so long we want to break it up into sections that clearly define what each section is and to do that, we’re going to use Section Dividers to break up the form.

by default the section dividers come with basic default styling

Adding the CSS

Now it’s time to add the CSS that will customize the style of the Section Divider.

For help in adding CSS to your site, please review this tutorial.

form#wpforms-form-220 .wpforms-field-divider h3 {
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

form#wpforms-form-220 .wpforms-field-divider {
    padding: 20px;
    background-color: #e27730;
    border-radius: 3px;
}

Now with the CSS added, our Section Divider has a completely different look and feel.

and this is how you customize the section divider

And that’s all you need to customize the Section Divider. Would you like to also customize the style of Checkbox items? Take a look at our article on How to Customize Checkbox and Radio Fields to Look Like Buttons.