Formidable Forms

The Most Advanced WordPress Forms Plugin and Form Builder

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Ryan Cordoni / July 8, 2020

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!

How to Create an Emoji Rating Scale in WordPress
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:

  1. Formidable Forms (WordPress form builder)
  2. A WordPress website
  3. 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 $99 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! 😀

Formidable Forms WordPress Plugin

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!

Download free emoji set

How to make an emoji rating system (5 steps)

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

  1. Install Formidable Forms
  2. Prepare your emoji images
  3. Create a new form in Formidable
  4. Add a radio button field to your form
  5. 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.

If you need an assist, follow this guide here.

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.

Create WordPress Form

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.

Add drag and drop form field

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.

Add images to polls with radio buttons

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.

upload image

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

Emoji rating scale system

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!

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".

CSS layout classes box

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

Customize add 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!

Read more survey & poll articles

  • WordPress evaluation form plugin The Ultimate WordPress Evaluation Form Plugin
    Read More
    The best voting plugin for WordPress The Best Voting Plugin for WordPress
    Read More
    WordPress poll plugin with images The Ultimate WordPress Poll Plugin (with Images)!
    Read More
  • How to Create a Questionnaire in WordPress How to Create a Questionnaire in WordPress
    Read More
    Ultimate WordPress Questionnaire Builder Plugin The Ultimate WordPress Questionnaire Builder
    Read More
    How to Create Polls in WordPress How to Create Polls in WordPress
    Read More
  • Online Survey vs WordPress Form Plugin Compared Online Survey vs WordPress Form Plugin Compared
    Read More
    How to Create a Survey in WordPress How to Create a Survey in WordPress
    Read More
    How to Build a Multi-Step Form in WordPress How to Build a Multi-Step Form in WordPress
    Read More
  • How to Ask the Right Survey Questions Without Sounding Like a Robot How to Ask the Right Survey Questions Without Sounding Like a Robot
    Read More
    Questions to ask on a customer satisfaction survey 10 Questions to Ask On Your WordPress Customer Satisfaction Survey Form
    Read More
    Top 10 tips for engagement on customer surveys 10 Tips For Creating A Customer Survey Form
    Read More
  • Easily Display Charts and Graphs without a WordPress Graph Plugin How to Create Charts and Graphs from WordPress Forms
    Read More

Formidable can do a lot more than create an emoji rating system. It's a complete WordPress form building solution!

Install Formidable Lite

Using WordPress and want to get Formidable Forms for free?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Chidi Emeke says

    January 29, 2021 at 10:04 pm

    So how do I remove emoji rating sclae from my site? it came with the theme.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get news and updates

Newsletter Signup

Popular Resources

    • WPForms Alternative: Formidable Forms vs WPForms Compared
    • 5 Best WordPress Customer Reviews Plugins [2020]
    • How to Create a WordPress User Directory
    • The Best Online Order Form Creator for WordPress
    • Online Survey vs WordPress Form Plugin Compared
    • How to Create a Calculator in WordPress
    • How to Create a WordPress Contact Form with File Uploads
    • Create An Instant Online Quote Form
    • How to Make a Quiz in WordPress
    • The Best Gravity Forms Alternative? Formidable Forms vs Gravity Forms Compared
    • How to Create WordPress Appointment Booking Forms
    • How to Create Charts and Graphs from WordPress Forms
    • How to Print Your WordPress Form Submissions to PDF
    • How to Make a MailChimp Contact Form in WordPress
    • 5 Easy Steps to the Perfect Online Lease Agreement Form
    • The Ultimate WordPress Questionnaire Builder
    • How to Add a Simple Contact Form in WordPress
    • How to Allow User Submitted Posts in WordPress Forms
    • The Best Voting Plugin for WordPress
    • How to Build a Multi-Step Form in WordPress
    • How to Build a Custom WordPress Login Form in 4 Easy Steps
    • Jotform Alternative: Formidable Forms vs Jotform Compared
    • Ninja Forms Alternative: Formidable Forms vs Ninja Forms Compared
    • How to Create a Real Estate Website with WordPress
    • How to Create User Accounts On Your WordPress Site
    • Contact Form 7 Alternative: Formidable Forms vs Contact Form 7 Compared
    • How to Collect Electronic Signatures in Online Forms
    • Beautiful Contact Form Design in WordPress (with Examples)
    • How to Replace Radio Buttons with Images in WordPress Forms
    • How to Create Conditional Drop Down Lists in WordPress Forms

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Front End Editor
  • Repeating Fields
  • Views from Entries
  • Calculator Forms
  • Conditional Logic
  • Visual Form Styler
  • Form Templates
  • User Submitted Posts
  • File Upload Forms
  • Spam Protection
  • Multi Page Forms
  • Surveys & Polls
  • Form Graphs & Charts
  • Save and Continue
  • Mobile Forms
  • Stripe Forms
  • PayPal Forms
  • WooCommerce Forms
  • MailChimp Forms
  • User Registration
  • Signature Forms
  • Bootstrap Forms
  • Quiz Maker
  • Zapier Forms
  • Salesforce Forms
  • HubSpot Forms
  • API Webhooks
  • Multilingual Forms
  • Directories

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2021 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews