How to Create an Emoji Rating Scale in WordPress

Want to use an emoji rating scale on your WordPress site? With the right tools, you'll have your emoji system set up & ready in no time!

Approximate read-time: 6.5 mins

You probably use emojis every day. On your phone, in emails, and on social media. Now there's one more place you can use them: on your WordPress website!

In this post, we are going to show you how to create an emoji rating system. If you look into the WordPress.org plugin directory, you'll see there are a lot of emoji plugins to choose from. But our solution takes a different approach.

We're going to use a WordPress forms plugin to build an emoji rating scale. Forms are an essential part of every website. And since every site needs forms, you can safely skip a dedicated emoji plugin.

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

Why use an emoji rating system?

With this tutorial, you can create an emoji rating system for any purpose. Maybe you've seen emoji reaction ratings on blog posts before.

That's only the tip of the emoji iceberg! 🧊

There are tons of ways to put emoji ratings to use on your WordPress site. Here are a few more ideas:

Customer satisfaction

Do you have a customer service team? Give your customers the power to rate your service staff with an emoji instead of a star rating.

How does this play out? An easy example of this is tech support. The customer may have had a positive interaction with a tech support agent, but their problem may not have been solved. In this case, we can use an emoji rating system to rate the agent & ask customers if their problem was solved separately.

This way, we are measuring the agent in two ways: their customer-service ability & their problem-solving ability. Both are valuable skills. But if you conflate the two using a star rating, you might end up with murky data.

Alternative to star ratings

Star ratings aren't the only way to gauge how happy a customer is. In fact, star ratings may be better when giving a review, but worse when assessing satisfaction. Emojis ask people how they feel, whereas star ratings ask people to be objective.

It's a subtle difference, but because star ratings and reviews have trained people to think objectively, it might be that they don't collect accurate information when used to assess a service agent.

Surveys & polls

If you run surveys or polls, an emoji rating system is another way to learn how people really feel. Since emojis have become popular, your audience will appreciate it.

When you ask a customer how they feel, you can definitely give them a range of text options. But it could be that an emoji says "extremely satisfied" better than words can. 🤩

Learn what makes Formidable an amazing WordPress Poll Plugin!

Wait, shouldn't I disable emojis in WordPress?

Some people say that you should disable emojis on your WordPress site. Ever since WordPress 4.2 was released, emojis have been supported by WordPress in the core installation. And yes, they do generate an additional HTTP request which could slow your site down.

But for our purpose today, none of this matters. You could disable emojis in WordPress and still use our solution! That's because we are going to inserting emojis as images rather than special characters.

This also means that our solution for rating emojis is completely customizable. You won't be limited in what images you can upload, so you can add emojis that you choose. And they will look the same on all mobile devices and operating systems.

Getting started with WordPress emoji ratings

Here's what you need to get started with this tutorial:

Formidable Forms (WordPress form builder)
A WordPress website
A set of emoji images

Formidable Forms

Formidable Forms is our WordPress form maker plugin. It's the plugin that will allow us to easily create our emoji rating system. To build our emoji ratings system, you'll need the premium version of Formidable to unlock the features needed.

The Basic premium plan costs $79 for first-time buyers. But if you want to give this tutorial a try, you can get Formidable risk-free for 14 days. If you don't like it, we'll give you 100% of your money back!

Or you can try our free WordPress plugin if you want to see how Formidable works. We hope you do! 😀

Where to get a set of emoji images?

Downloading a set of emoji images is actually easier than you might think. Just go to a website called FreePik and search for "emojis". You'll find a ton of free resources... and you don't even need to sign up for an account!

How to make an emoji rating system (5 steps)

Here are the steps we'll take to build our emoji rating system:

Install Formidable Forms
Prepare your emoji images
Create a new form in Formidable
Add a radio button field to your form
Publish your emoji rating form

1. Install Formidable Forms

The first thing we need to do is to install Formidable Forms. This is pretty much the same process as installing any other WordPress plugin.

2. Prepare your emoji images

If you haven't already done so, download a set of emojis from FreePik.com. Download a set of emojis that have a range of faces to choose from.

Now we just need to save your emojis as individual images. We want to make sure they are all the same size so your rating system looks its best.

If you have access to Adobe Illustrator or Photoshop, this will be pretty easy for you. If you don't have Adobe, you can try using a free app like Inkscape. This app allows you to open AI & EPS files, which your emoji set will probably be if you downloaded from FreePik.com.

Inkscape is fairly easy to use, but if you are having trouble, refer to their tutorials page. There you will find a series of guides to help you.

3. Create a new form in Formidable

The first thing we'll do is create a form to use for your popup.

From your WordPress admin, look at the sidebar on the left side of your screen. Go to Formidable → Forms and click Add New at the top of the page.

From there, click Create Form under 'Blank Form'. Give your new form a name and click Create to start building the form.

4. Add a radio button field to your form

Now we need to add the emoji rating field. In this case, we want to add a radio button field. To do this, just drag and drop a radio button field from the left column to the right form-building area.

Here's where it all comes together. Click on your radio button field and look into the field options in the column on the left.

Under the Radio Button Options, check off Use images for options. Now your radio buttons should look a lot different in the form building area.

For an emoji rating system, we probably don't want form labels. So check the option to Hide form labels.

Now we can add our emoji images by clicking on the Upload image button under each option! Although we are hiding form labels, be sure to give each option a name for tracking purposes.

After all that, your radio button field should look something like this:

Click on the Update button in the top right corner of the screen to save your form. Then we'll take care of one more detail before publishing your emoji rating system!

Alternatively, you can display these options as buttons too:

5. Publish your emoji rating form

By default, when we use images in place of radio buttons in Formidable, the images have a border on them. But for our emoji rating system, we don't need a border. So we have to do a tiny bit of coding to make that happen.

Actually, coding sounds a bit much. It's more like copying and pasting!

First, copy this into the CSS Layout Classes box in the Radio Button Field Options: "frm_no_border".

Then, open another tab on your site and go to your WordPress Customizer. From there click on Additional CSS.

Finally, copy this piece of code into the code box on the Additional CSS tab:

.frm_no_border{
--border-color:transparent;
}

That should remove the borders! Now, all we need to do is publish the form.

6. Publish your emoji rating form

We can't wait to see your smiley face when it all comes together! 🙂

Now, all we need to do is go back to our form and click on the settings tab. There you will see the shortcode for the form.

Now you can place the rating system anywhere on your site. If you want to put it at the bottom of a blog post, you can do that. If you want to put it in any widget area (sidebar or footer), you can do that too!

Wrapping up

That's all there is to it! You've now got an emoji rating scale system that you can use anywhere on your site. Of course, you could also use it as part of any form you want: in a survey, poll, or even a multi-page form.

We hope this tutorial has put a smile on your face! Keep it locked to the Formidable blog for more WordPress tips and tricks. See ya!

How to Create an Emoji Rating Scale in WordPress