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.
Demo Gravity Forms Rating field
How to change the size of the Star Rating?
You can use this CSS code on the page to make the Stars bigger and make the text transparant.
.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 Stars images. This code is used in the example of this page.
.gsurvey-rating > input:checked ~ label {
background-image: url(https://gravitywp.com/gravity/star1.svg);
}
.gsurvey-rating:not(:checked) > label {
background-image: url(https://gravitywp.com/gravity/star0.svg);
}
.gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label {
background-image: url(https://gravitywp.com/gravity/star2.svg);
}
We added a Star (star2.svg) to use when hovering the stars, to make it more clear.
Share this Post