GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

Erik van Beek

Star rating field Gravity Forms

· ·

Do you want to add a rating field to your Gravity Form? For example to rate an experience, article or for another evaluation? With the Survey Add-On you can easily add a Rating field to your webform.

Download Gravity Forms Survey (Add-On) Buy Gravity Forms
  1. How to change the size of the Star Rating?
  2. How to change the Stars in Gravity Forms Star Rating?
DEMO

Try the styled Star Rating in Gravity Forms

Rating Survey Field: How do you like this article? Just hover around and click on a star to see what happens.

How to change the size of the Star Rating?

You can use this CSS code on the page to make the Stars in the Gravity Forms Survey field (much) bigger and make the text transparant or invisible.
.gsurvey-rating:not(:checked) > label, .gsurvey-rating:not(:checked) > label:hover, 
.gsurvey-rating:not(:checked) > label:hover ~ label, .gsurvey-rating:not(:checked) > label, 
.gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label, 
.gsurvey-rating > input:checked ~ label {
    width: 65px;
    line-height: 50px;
    background-size: 50px 50px;
    color: rgba(221, 221, 221, 0) !important;
}

How to change the Stars in Gravity Forms Star Rating?

You can use this CSS code on the page to change the Gravity Forms Survey Stars images. This code is used in the example of this page. We  changed the color of the default stars (and for the hover effect) to match our desired color. This way you can easily change even the image that is being used inside the rating field in Gravity Forms Survey.
.gsurvey-rating > input:checked ~ label {
    background-image: url(https://demo.gravitywp.com/star1.svg);
}
 
.gsurvey-rating:not(:checked) > label {
    background-image: url(https://demo.gravitywp.com/star0.svg);
}
 
.gsurvey-rating:not(:checked) > label:hover, 
.gsurvey-rating:not(:checked) > label:hover ~ label {
    background-image: url(https://demo.gravitywp.com/star2.svg);
}

Hire the best developers for Gravity Forms

If you’re looking for good and experienced Gravity Forms developers to help you with your questions about Gravity Forms (like Star rating field Gravity Forms) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.

Click here to visit Codeable