TutorialStar 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.

Survey Add-on

The Star Rating field is available after you install the Survey Add-on from Rocketgenius.

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close