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.
- Add a Star Rating field to your form.
- Determine how many stars you would like to display with the Maximum Rating option. It is very common to set the maximum to 5.
- 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.
Related customizations
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-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;
}
How to Add Star Ratings in WordPress
How to Create a WordPress Photo Rating Form
How to Add Reviews to Your WordPress Website
How to Calculate a 5 Star Ratings Average in WordPress