How to Customize the Likert Scale Field Table

Overview

Would you like to customize the styling on the Likert Scale form field in WPForms? If you’d like to change the styling of this field to match the branding colors for your site, this tutorial will show you how. We’ll give you the basic CSS example needed to customize the styling of the Likert Scale table.

Setup

1) Adding the form field

First, you’ll need to add a Likert Scale 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 code snippet below, we’ll be targeting the styling for the form ID 548.

form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, form.wpforms-form .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after {
background-color: #FF9800;
}
form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after {
    border: 1px solid #EF6C00;
}
form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th, form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th, form#wpforms-form-548 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

The above styling will change the even and odd row colors as well as the color of the option when checked. Don’t forget to change the -548 in the CSS below to match your specific form ID.

Customize likert scale with the above CSS on WPForms

And that’s it! You’ve now updated the styling on the Likert Scale table. Would you like to also customize the styling on the Net Promoter Score form field? Try out our tutorial on How to Customize the Net Promoter Score Field.

FAQ

Q: How do I remove the word break on my options?

A: By default, WPForms adds a word-break to the text using CSS. You can remove this by adding additional CSS.

Remember to change the -548 to match your form ID.

form#wpforms-form-548 .wpforms-field-likert_scale table tbody tr th {
    word-break: normal
}