The Star Rating field allows you to submit star ratings and display them on your site. When a star is selected, all stars to the left of the selection will fill automatically.

Field options

• Field Type
• Required
• Unique
• Field Key
• CSS Layout Classes
• Label Position
• Visibility
• Conditional Logic
• Dynamic default value

Field-specific options

Set up a field for star ratings

Follow the directions below to set up a field for star ratings.

1. Add a Star Rating field to your form.
2. Determine how many stars you would like to display with the Maximum Rating option. It is very common to set the maximum to 5.
3. Save your form. The field will now look like this on the front-end. If
   
   If you need to deselect a star rating, click the current selected star rating once more.

Display star ratings

You can display a single rating or an average of several ratings from your Star field. You may add the following shortcodes to a page, post, View, widget, etc. If you use these shortcodes in a View, be sure to include filter=limited in your View shortcode. If you leave that out, the frm-stats shortcode will show on the page instead of being replaced with the stars.

• Display average star rating: Display the average star rating of all submitted entries. The rating will be rounded to the nearest 1/2 star.
  

  [frm-stats id=x type=star]

  Replace x with the ID or key of the Scale field.

  If you would like the users be able to rate an entry/post and then display an average rating for each one, see the advanced view page for specific instructions.

• Display single star rating: Show the rating in a view.
  

  [x html=1]

  Replace x with the ID or key of the Star Rating field.

For more shortcode options, see Field Totals and Statistics. All parameters on that page can be used with the star ratings shortcode.

Related customizations

Increase the size

To increase the size of the stars, add the following CSS in your Formidable → Global Settings → Custom CSS page. You may adjust the 30px font-size as needed.

.frm-star-group .star-rating, .frm-star-group input + label {
   width: auto;
   height: auto;
   font-size: 30px;
}

Hide empty stars

If you are displaying the star ratings in a View, the following CSS can hide the empty stars. To know more about where to add custom CSS, see CSS examples.

.frm-star-group i:not(.star-rating-on) {
    display: none !important;
}