How to replace survey icons via custom HTML

This article covers the process of editing custom HTML templates to replace default icons (checkmarks, X marks, etc.) with any emoji of your choice. You will learn the default HTML structure of Yes/No buttons in Email and Web surveys and how to replace specific variables to customize button styles. The process involves using web browser developer tools to inspect HTML elements and the Mindful Feedback HTML editor to update the Yes/No button styles.

Understanding the Default HTML

Before defining custom HTML, let's take a look at the default code for Yes/No buttons on an Email survey and a Web survey. Note that the code behind the buttons will differ between the two types.

Email Survey

Looking at the Yesno.html file for Email surveys, we can see that the Yes and No input buttons are contained within a table. Two variables, {{yes_input}} and {{no_input}}, are located within a single row of the table. These variables handle all of the styling of the Yes and No buttons, including the checkmark and X icons. Since we do not have control over these variables, we will need to replace them with custom HTML to style the buttons as we would like.

What are the Variables Doing?

Before we can replace the variables, we need to know what is happening behind the scenes. It is important not to lose any functionality of the buttons when we replace the variables. We also want to maintain the general styling of the buttons while only replacing the icons. To see what is happening, we will open a web browser's developer tools and inspect the buttons themselves. Below is an example of the HTML behind the Yes button.

Looking at the example above, we can see that the Yes button is an anchor element (<a>) with several attributes:

• href: Points to the landing destination to register the response
• class: Styles the button with the email-button-yes CSS class
• style: Adds more styling on top of the CSS class
• text: A checkmark icon is placed between the opening and closing tags (<a> and </a>)

Note that these values will differ for the No button, so we will need to inspect both. 

We need to replicate this anchor tag in the custom HTML template. To replace the checkmark and X icons, we can replace the variables in the default HTML template with the <a> elements we obtained through the browser developer tools. Then, we can simply replace the icons with any other icons, emojis, or images.

Web Survey

The web survey works differently, but the technique for updating the button styling is essentially the same. Looking at the default HTML, we can see that variables are used for the buttons here, as well.

What are the Variables Doing?

Just as we did for Email surveys, we will open a web browser's developer tools to inspect these elements, so that we can obtain the code behind the variables and make adjustments.

The code behind the buttons on the Web survey is more complex than that used for Email surveys, but we only need to make a small change to accomplish our goal. First, take a look at the elements used:

• Both buttons are contained within a <div> with a class of yesno-response-container.
• Two HTML forms are located within the <div>, one for each button
• Three hidden inputs are contained in each form:
  • Two inputs to provide metadata with form submissions
  • One input to secretly hold the value of "Yes" or "No" to be submitted
• HTML buttons are used within the Yes/No inputs.
• Within each button, an idiomatic text element (<i>) is placed, with two CSS classes assigned.
  • The first of these classes (fa) contains simple styling, but the second classes (fa-check and fa-times) place the default icons on the buttons. We need to remove these classes and replace them with our chosen emojis.

Updating the HTML

For this tutorial, we will replace the existing icons with UTF-8 Emoji Faces. This method is quick and simple, but it limits our options. You could use an image tag (<img>) to place any image you would like, instead. 

After reviewing the reference for UTF-8 Emoji Faces, we will use &#128512 😀 for the positive response and &#128531 😓 for the negative response. As we update the code, we can view the results directly in the Custom HTML editor in the Feedback UI.

Email Surveys

Since the icons are hard-coded into the HTML for Email surveys, we'll simply replace those values with our UTF-8 codes.

First, copy the entire anchor tags from the prior section, then replace the {{yes_input}} and {{no_input}} variables in the custom HTML template with those elements. Notice that we are still using a table with a single row to place the buttons. We have simply replaced the default variables with new code.

With that done, we can simply replace the hard-coded icons from between the opening and closing tags anchor tags with our UTF-8 codes:

Web Surveys

For Web surveys, we will start by replacing the entire <div class="yesno-response-container"> with the code we obtained from the web browser developer tools. Since we identified  that the icons are coming from the fa-check and fa-times classes, we will remove those classes from the <i> elements within the buttons, then place the UTF-8 codes between the opening and closing <i> tags: