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.

Adding the form field

First, you’ll need to create a form and your fields as well as the 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.

Adding the CSS

Next, you’ll need to copy this CSS to your site. If you need any help in how to add CSS to your site, please check out this tutorial.

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;
}

The above CSS will only be applied to the form with the ID of 548. Before saving this CSS, you’ll need to update that form ID to match your form ID.

If you need any assistance in how to find your form ID, please review this tutorial.

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.