How to Customize the Look of the Rating Icons

Would you like to enhance the appearance of your Rating field icons in WPForms? While the form builder provides basic color and icon options, you can achieve more sophisticated styling using CSS.

This guide will show you how to customize your rating icons for a unique look that matches your brand.

Setting Up Your Form

First, create your form and add a Rating field. You can start by selecting your preferred icons and colors through the form builder. If you need help creating your form, please see our guide on creating your first form.

For details on using the Rating field, check out our comprehensive guide on the Rating field.

Adding Custom Icon Styles

To customize your rating icons, add this CSS to your site. If you’re not sure how to add custom CSS, please see our guide on adding custom CSS to your site.

Make sure to replace form#wpforms-form-1000 with your actual form ID. If you need help finding your form ID, check out our guide on how to find form and field IDs.

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

Using Custom Images as Rating Icons

If you prefer to use your own images instead of the default icons, you can use this alternative CSS:

/* Style custom image rating icons */
form#wpforms-form-1000 .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%;
}

/* Style hover and selected states */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
    background-size: 70%;
}

/* Hide default SVG icons */
form#wpforms-form-1000 .wpforms-field-rating svg {
    display: none;
}

Remember to update the image URL to point to your custom image. The example assumes an image size of 150px by 150px.

Frequently Asked Questions

Q: Will these styles work with Conversational Forms?

A: Yes! 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.

And that’s all you need to customize the look of the Rating form field icons in WPForms! Next, would you like to also customize the look of the captcha theme for reCAPTCHA? To do so, take a look at our tutorial on changing the captcha theme on Google reCAPTCHA.