How to Customize the Net Promoter Score Field

Overview

Would you like to customize the look Net Promoter Score form field? Using a little CSS you can easily change the look and feel of this form field on your site. In this tutorial, we’ll show you how to use CSS to change the styling of this field.

Setup

1) Adding the form field

First, you’ll need to add a Net Promoter Score field to your form and then configure the options you’d like for this field. If you need assistance with this, please review the documentation.

2) Adding the CSS

Next, you’ll need to add the CSS to your site. In the CSS below, we’re making the CSS changes to the form ID -548.

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}

Remember to change the -535 in the CSS above to match your specific form ID.

Adding the CSS above will customize the net promoter score form field inside your form by changing the color on active and hover states.

And that’s it! You’ve successfully used CSS to customize the Net Promoter Score form field. Would you like to customize the styling of the Ratings form field icons? Take a look at our article on How to Customize the Look of the Rating Icons.