Creating a review/voting system by embedding a form into a single entry

Because GravityKit's Ratings & Reviews extension is based on the WordPress comments system, it is limited in some ways. For example, you can't export the reviews, or you can't generate a chart based on the votes. There are numerous other limitations besides these two ones.

In this tutorial, we'll provide a workaround to these limitations by using an embedded form inside a View's Single Entry page. We will create a new form to collect these ratings (or votes) and a new View to display them.

What we'll need:

• The main View, in this case, is a simple Movie Catalog;
• A very simple form to collect movie reviews (Review this Movie);
• A View to display those reviews (Movie Reviews). This View will use the Review This Movie form as the data source.

Our Review This Movie form:

How are we going to do it:

1. We'll start by adding a Custom Content field to the Single Entry page of the Movie Catalog View;
2. The entry id of each movie will be used as a way to associate it with the reviews;
3. Inside our Review This Movie form, we'll have a hidden field that will collect the current entry id of the Movie in question;
4. Embed the movie reviews form into that Custom Content field using the [gravityform] shortcode;
5. Pass the current entry id to that form's shortcode by using Dynamic Population; The entry id of the Moview can be pulled by using the {entry_id} Merge Tag;
6. Embed the movie reviews View below that form above using the [gravityview] shortcode;
7. Filter that View to only display reviews with the same entry id of the current Movie using the search_field and search_value parameters.

In this example, the Movie Catalog View uses the List View layout, which has the perfect place to embed the form and View for our tutorial:

And here's what all of that looks like:

Bonus!

For the star rating on the form, we used the Rating type from the Survey field (only available in the Elite license of Gravity Forms), but to achieve that similar look on the View, we had to use the [gvlogic] shortcode and dashicons.

Here's the code we used:

[gvlogic if="{Your Rating:3:value}" is="Terrible"]
<span class="dashicons dashicons-star-filled"></span>
[/gvlogic][gvlogic if="{Your Rating:3:value}" is="Not so great"]
<span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
[/gvlogic][gvlogic if="{Your Rating:3:value}" is="Neutral"]
<span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
[/gvlogic][gvlogic if="{Your Rating:3:value}" is="Pretty good"]
<span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
[/gvlogic][gvlogic if="{Your Rating:3:value}" is="Excellent"]
<span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span>
[/gvlogic]

When using the logic above, please replace {Your Rating:3:value} with the proper Merge Tag of your rating field.

The following CSS style was necessary to paint the stars gold:

.dashicons-star-filled{
    color: gold;
}

If you have further questions, please contact our support. We'll be glad to help with your project!