Star Ratings

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
• Maximum Rating
• Visibility
• Conditional Logic
• Dynamic default value

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:
   

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.

Increase the size

You will need custom CSS to increase the size of the stars. Custom CSS can be added in your 'Formidable' → 'Styles' → 'Custom CSS' box. The following CSS will increase the size of your stars. You may adjust the 30px font-size as needed.

.frm_form_fields div.star-rating:before, .frm_form_fields div.star-rating a:before { font-size:30px; }

The following CSS ensures that your stars don't get cut off or start to repeat.

.frm_form_fields div.star-rating { height: 30px; width:auto; }

The height should be close to the font size, but you can play around with it to get things to your liking.