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

Note:
  • This article covers advanced techniques for creating custom HTML templates. To learn the basics, see Custom HTML Templates first.
  • This article only discusses Email surveys, but you can use the same technique to update Web surveys.

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:

example of default button styling

Looking at the Yesno.html file, 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.

example of inspecting H.T.M.L.

Looking at the example above, we can see that the Yes button is an anchor tag (<a>...</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.

Updating the HTML

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.

In this example, after replacing the variables with anchor tags, 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 seen below. Notice how we are still using a table with a single row to place the buttons. We have simply replaced the default variables with new code.

example of updated H.T.M.L.

Before saving the changes, we can view the result directly in the Custom HTML editor in the Feedback UI.