How to Customize the Look of the Rating Icons

Overview

Would you like to customize the look of the Rating field icons in WPForms? By default you can select the color of the icons as well as the icon itself, but did you know with a little CSS, you can style these icons even further? In this tutorial, we’ll give you some CSS to adjust the styling on these icons when using the Rating form field.

Setup

1) Adding the Rating Form Field

First, you’ll need to add a Rating field to your form, choose the icons and the color of the icons. If you need assistance with this, please review the documentation.

2) Adding the CSS

It’s now time to add the CSS. In the CSS code snippet below, we’re going to target the form ID 535. Just copy the following CSS snippet to your site..

div.wpforms-container-full form#wpforms-form-535  .wpforms-field-rating svg {
    fill: transparent !important;
    stroke: #448ccb !important;
    stroke-width: 20px !important;
    opacity: 1 !important;
}
div.wpforms-container-full form#wpforms-form-535  .wpforms-field-rating-item svg:hover {
    fill: #448ccb !important;
}
div.wpforms-container-full form#wpforms-form-535 .wpforms-field-rating-item.selected svg {
    fill: #448ccb !important;
    transform: none !important;
}

div.wpforms-container-full form#wpforms-form-535 .wpforms-field-rating-item.hover svg {
    transform: none !important;
}

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

And that's all you need to customize the look of the rating icons

And that’s all you need to customize the look of the Rating form field icons in WPForms! Would you like to also customize the look of the captcha theme for reCAPTCHA? Take a look at our tutorial on How to Change the Captcha Theme on Google Checkbox v2 reCAPTCHA.

FAQ

Q: Will this work for Conversational Forms too?

A: Absolutely! This CSS will customize the look of the rating icons when using the Conversational Forms addon, the Forms Pages addon as well as a standard embed of the form in any post, page or widget.