Star Rating Field

In this article, we will try to explain how to to add a Star Rating Field on Contact Form 7 with the help of our Free Addon “Contact Form 7 Star Rating Field”.

What’s needed

  • Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
  • Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Star Rating checkbox. Then click the Save Changes button. This will enable the “Contact Form 7 Star Rating addon” settings.

Contact Form 7 Star Rating

Contact Form 7 Review Form – Live Example

In this tutorial, we will create a Contact form 7 product review form with the help of our star rating addon like the example below. You can, for sure, create your own form following the same steps.

contact form 7 review form

Check our main demo to see all the supported fields for CF7 columns.

Contact Form 7 Star Rating Field based Form Creation

Open Contact>Add New. Put a suitable Title and create a new Contact Form. Here, we put the title Star Rating.

Contact Form 7 Star Rating

Star Rating Tag

Now that you’ve turned on the feature and created a Contact Form, it is time to know the features that are available for you. Inside the Admin Panel, you will find a Star Rating Tag.

Contact Form 7 Star Rating

Open Star Rating. A Menu will pop up on your screen containing following features:

  • Field Type: This section has only one option that asks you whether this rating field in your Contact Form will be required one or not with a Tick Button on the left of the title.
  • Name: Since this is an HTML Tag, you can put a name for the Star Rating Tag specifically to keep track of the Tag in this section.
  • Rating Icon: In the free version, we provided two basic Star Icon Templates to mark your ratings inside the Contact Form. For more options, you may upgrade to Pro. There are hearts, thumbs up, smiles etc available and more to come soon.
  • Icon Class: This is a pro feature.
  • Star Rating Style: This is also a pro feature.
  • Default Selected Star: You can choose the number of Stars that will already be selected in your Form when a user visits the page. You may choose any number from 1 to 5. You have to put the digits numerically.
  • Change the Values of the Star: You can change the value of the star from 1,2,3,4,5 to qualitative measures like Strongly Agree to Strongly Disagree or other attributes according to your preferences. There is a section for each star to put the values.

And below is an Insert Tag Option for inserting the Tag inside the Admin Panel of your Contact Form.

Contact Form 7 Star Rating

Setting Up Star Rating

Open Star Rating from the Tag Generating options. A Menu will pop up. Then continue the following:

  • If you want to keep this Star Rating a required option for your Contact Form, then Tick the button for the Required Field
  • Put on a name for the Star Rating Tag. g. Rating
  • Choose a Rating Icon.
  • Set a value for Default Selected Star from 1 to 5.
  • If you want to change the variable from numeric to character variables for each star, put the values sequentially in the Star 1, Star 2, Star 3, Star 4, and Star 5 Box.
  • Click Insert Tag from below to insert the tag inside your Contact Form Admin Panel.

Contact Form 7 Star Rating Field

After you’ve entered the Star Tag, you will find an HTML Tag given in the image below.

Contact Form 7 Star Rating Field

Rearrange the codes in the Admin Panel. Suppose, you want to put the rating below ‘Your email’. Then Copy/Cut the HTML Tag and place it below Your Email’ as given in the image below.

Contact Form 7 Star Rating Field

Note: If you want to put a label on your Star Rating then put the title and the Star Rating Tag inside <label>…</label> like given in the image below.

Contact Form 7 Star Rating Field

After you are done inserting Tag and rearranging the Codes, Save the changes from below.

Mail Setup

To receive the Star Rating feedback on your email, open Mail above the HTML Tag Generators. This is also called keys switch panels.

Contact Form 7 Review

You will find a mail setup option for your Contact Form. If you wish to change your receiving mail address, you can provide the mail address inside the To box. If the mail address doesn’t work you could use < [mail address]/> this tag to overcome this issue.

Contact Form 7 Review

To receive the Star Rating feedback via email, Open Mail from the key switch panels. You will find a few suggested mail-tags inside the panel. Copy> [rating] and place it inside the Message Body as given in the image below:

Contact Form 7 Review

Copy Shortcode

Now that you’ve inserted the Star Rating Tag and got everything set up, Copy the Shortcode below the title from the Admin Panel.

Contact Form 7 Product Review Form

Time to Publish

Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.

Contact Form 7 Product Review Form

Your Contact Form is ready. Now if you put all the information and Submit. You will receive mail with Star Ratings from your audiences.

Contact Form 7 Product Review Form

Ultimate Star Review Page

After installing the UACF7 Addon – Star rating pro plugin. You will get an extra menu option on the left side of your dashboard. You can able to a star review page on your website using our ultimate star rating pro addon.

Full Form Code

Here is a sample code of our above form:

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Your Rating
    [uacf7_star_rating rating] </label>

<label> Your Testimonial / Feedback
    [textarea your-message] </label>

[submit "Submit"]

Watch Complete Video

If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of How to create a star rating form with Contact Form 7:

Still Not Clear? Please contact us. If you are a free User, you can open a ticket from here. If you are a pro user, you can open a ticket from here.