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 Likert Scale form field.

Creating your form

We’ll start by creating the form and adding our form fields including the Likert Scale.

If you need assistance on creating a form with the Likert Scale form field, please review the documentation.

Adding the CSS

Next, you’ll need to copy this CSS to your site.

If you’re not sure how to do this, please review this tutorial.

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after {
    border: 1px solid #EF6C00;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .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.

You’ll need to change the -971 as that is the form ID for our example.
You’ll need to update this number to match your own form ID.

If you need help in locating your form ID, please review this documentation.

And that’s it! Simply by using CSS you can customize the Likert Scale styling on your form. 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 -971 to match your form ID.

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