How to Customize the Look of the Rating Icons

Overview

Would you like to customize the look of the Rating icons in WPForms? By default you can select the color of the icons as well as the icon itself. However, did you know that with a little CSS, you can style these icons even further? We’re going to show you how to style these icons using CSS to customize these icons even further.

Creating the form

First, you’ll need to create your form and add a Rating field to your form.

Once you’ve added the field, you can choose the icons and the color of the icons. If you need assistance with this, please review the documentation.

create your form, add your rating field and on the Advanced tab set your icon and icon color.

Adding the CSS

It’s now time to add the CSS. Copy and paste this CSS to your site.

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

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

With this CSS we’re only targeting the rating icons inside the form ID -535. You’ll need to update this CSS to match your own form ID.

If you need help in finding your form ID, please check out this tutorial.

by adding this CSS you can now customize the look of the rating icons to match any style you'd like

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.

Q: What if I wanted to use my own image for the icons?

A: If you’d like to use your own image, you can certainly do that but the CSS will look differently.

Once you’ve uploaded your image to your server or inside your WordPress Media Library, copy and paste this CSS to your site.

In our example, we’re using an image that is 150px in width and 150px in height.


form#wpforms-form-535 .wpforms-field-rating-item {
    padding-right: 6px;
    background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-size: 50%;
}
 
form#wpforms-form-535 .wpforms-field-rating-item:hover, 
form#wpforms-form-535 .wpforms-field-rating-item.selected {
    background-size: 70%;
}
 
form#wpforms-form-535 .wpforms-field-rating svg {
    display: none;
}

You would just need to update the form ID (535