Create an Emoji Rating Scale in WordPress

How to Create an Emoji Rating Scale in WordPress (Step by Step)

Do you want to add an emoji rating scale to a form or survey?

Adding an emoji rating scale lets customers provide feedback in a fun and user-friendly way.

We’ll show you how to create an emoji rating scale on any WordPress form.

What Is an Emoji Rating Scale?

An emoji rating scale is a ranking system that’s comprised of clickable emojis or icons.

By clicking on these icons, customers can show how they feel, from negative, to neutral, to positive.

Emoji Rating Scale with smiley faces

WPForms is the best WordPress Form Builder plugin. Get it for free!

The emoji rating scale is handy when emotions or feelings are involved, becoming a gauge by which you can determine the levels of customer satisfaction. Emoji ratings are quick and fun for customers, resulting in more feedback submissions and less form abandonment.

How to Create an Emoji Rating Scale in WordPress

This post will show you how to create and add your emoji rating system. We’ll be using WPForms’ Rating field to build your emoji rating scale and eliminate the need for a dedicated plugin.

Let’s dive in!

Step 1: Install WPForms

The first thing we’ll need to do is install WPForms. You’ll need a WPForms Pro license or above for the scale to work, and you can purchase it here.

If you need some expert guidance for the installation, read our easy-to-follow tutorial to take you through the entire process.

Step 2: Install the Surveys and Polls Addon

Once WPForms has been installed and your license is verified, you can navigate to the WPForms section of your WordPress dashboard.

From WPForms, click on Addons.

WPForms addons

Scroll down to the Surveys and Polls Addon.

Install WPForms 'Surveys and Polls' Addon

Click Install Addon. The Addon should now show as Active.

'Surveys and Polls' Addon

Step 3: Create a New Survey Form

Now that WPForms is ready and you’ve activated the Surveys and Polls addon, it’s time to create the form with your emoji rating scale.

From your WordPress dashboard, go to WPForms Forms and click Add New at the top of the page.

Red arrow pointing to the Add New form button

Next, give your form its desired name.

Then, type Survey Form into the search box on the left.

Survey form template

Hover over the Survey Form until the orange Use Template button appears and click it.

Your new Survey Form template will look something like this:

Survey form template

Step 4: Add a Rating Field to Your Form

Now you have the survey form template; it’s time to edit it!

After opening the form builder, look under the Fancy Fields section to find the Rating field. Click the field or drag and drop it into the preview area to add it to your form.

Add a Rating field to your form

Once you’ve added the field to your form, click on the Field Options panel in the preview area. By doing this, we can edit the form field preferences.

Open the Field Options tab

Step 5: Change From Star Icons to Other Emojis

To customize the Rating field’s icon symbol, click on the Advanced tab in the Field Options panel.

Click on the Advanced tab

By default, the Rating field will display star icons. However, using the Icon dropdown, you can choose from any of the options listed below:

Choose your type of icon for your emoji rating scale. The icons are Star, Heart, Thumb, or Smiley Face

Chane the icon to Smiley Face, and the form will automatically reflect the change.

WPForms' emoji rating scale in action

Pro tip: Do you want to use your own custom icon? You can do that if you’re willing to add a code snippet to your site. To learn more, check out this developer doc on how to customize the look of the rating icons in WPForms.

Step 6: Additional Customization Options

If you don’t want to edit code, you can still control the way your emoji rating scale looks.

First, you can add a label and description to the Rating field in the Field Options panel.

Add a Label and Description to the Label field

To adjust the maximum rating value, click the Scale dropdown. Here, you can choose to display anywhere from 2 to 10 icons within the Rating field.

Adjust the Scale option

You may also choose to toggle on the Required setting to make sure users select a rating before submitting your form.

Required setting toggle option

Customizing Emoji Rating Scale Field Options

To customize the Rating field’s icon size and color, return to the Advanced tab in the Field Options panel.

By default, WPForms will set the Icon Size to Medium. You can instead change this to Small or Large if you’d prefer.

Adjust Icon Size

Here’s how the size options compare on the frontend:

Emoji rating scale icon size

By default, WPForms will set the Icon Color to orange. You can easily customize this by clicking the color box and using the color picker tool.

Emoji rating scale color change

And that’s it! Your rating scale is ready.

Step 7: Embed Your Form on a Page

Once you’ve saved your work, it’s time to embed it on your intended page.

Embed your emoji rating scale form

Click the Embed button on the top right of your form. The popup will allow you to choose how you wish to embed the form: Select Existing Page, Create New Page, Embed Your Form Manually, or Use a Shortcode.

Take a look at our guide for full form embedding instructions.

Step 8: The End Result

That’s all there is to it! You’ve now got an emoji rating scale system that you can use on any form, anywhere on your site.

The custom emoji rating scale on WordPress

Consider using the scale in a survey, poll, or even a multi-page form as an alternative to star ratings to receive your customer feedback.

Next, Customize Your Password Reset Form

Want to get rid of the default password reset page and use something more fun?

WPForms lets you publish your own password reset form with custom fields. Learn how in our tutorial on how to customize the password reset form in WordPress.

Ready to build your form? Get started today with the most accessible WordPress form builder plugin, WPForms Pro. The Pro level subscription includes hundreds of free templates, access to top-level form features, and a 14-day money-back guarantee.

Create Your WordPress Form Now

Please subscribe to our YouTube channel for WordPress video tutorials if you like this article. You can also find us on Twitter and Facebook.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.