• Skip to primary navigation
  • Skip to main content

GravityWP

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

  • Tutorials
  • Forms
  • Views
  • Workflow
  • PDF
  • Perks
  • Show Search
Hide Search
Erik van Beek

Star rating field Gravity Forms

Erik van Beek · Feb 8, 2018 ·

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 (affiliate link)
  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.
  • 4 quarters CSS

  • Fill in a number
  • Gravity Forms - Radio Buttons / Checkbox Images

  • JetSloth - Image Choices

  • Gravity Forms - List

  • Column 1Column 2Column 3Column 4 
  • Gravity Forms - Survey - Stars (rating)

  • GravityWiz - Copy Fields

  • Copy Field

  • Just type something here ;-)
  • Copy Address

  • GravityWiz - Unique ID

  • ovann86 Dropdown List Field

  • Simple dropdownAdvanced dropdown 
    Just click on the '+' sign to add new rows with dropdowns.
  • ovann86 List Field Number

  • US notationEU notationValuta 
  • ovann86 List Field Date

  • Date Format dd/mm/yyyyDate dd-mm-yyyy with IconDefault Date Set yyyy/mm/dd 
  • ovann86 List Field Date

  • Upload 1Upload 2 
  • Slider

  • Perk Word Count

  • Minimal 2 and maximal 6 words.
  • Maximal 144 characters
  • Maximum 1000 characters (default option in GF)
  • GF Survery Ranking

    • First Choice
    • Second Choice
    • Third Choice
    • Fourth Choice
    • Fifth Choice
    • Happy
    • Crazy
    • Not happy
  • GF Survery Likert

  • Strongly disagreeDisagreeNeutralAgreeStrongly agree
  • Strongly disagreeDisagreeNeutralAgreeStrongly agree
    First row
    Second row
    Third row
    Fourth row
    Fifth row
  • Limit Dates

  • Date Format: DD slash MM slash YYYY
    Select your date between today and 1 month ahead. You can only select Tuesdays, Wednesdays and Thursdays in this period. That's what this plugin does, and more. For example you can set fixed dates, ranges from today, etc.
  • Merge tags gravity pdf

  • read-only-fields

  • bar-chart-gravity

  • Not required. We keep you updated about new versions if you fill in your e-mail address here.
  • Please enter a number from 1 to 99.99.
  • Percentage Sign

  • CSS List

    • Check if this is done;
    • Check if that is done;
    • And finally check if everything is done.
  • Gravity Forms Entries in Excel

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);
}
Download Gravity Forms Survey (Add-On) Buy Gravity Forms (affiliate link)

Gravity Forms

© 2021 - This website is made possible by the wonderful services of
WordPress, GravityForms, GravityView, GravityWiz, Genesis Framework & WP Engine

  • About
  • Hire GF developers
  • Charts
  • Cheat Sheet