Surveys for Jira is not only the most configurable survey app on the market. It also provides freedom for you to brand your surveys in any way you want.
You only need to throw in some CSS glitter, and sky is the limit as to what you can do.
You can use CSS to customize the surveys. That includes the smileys: you can configure the rating scale to appear as sad / happy smiling faces for your users.
We would like to help get you started, so here is the examples for you, and this is how it works.
So there's two places where a survey recipient can see the rates (be that stars or smileys, or whatever image):
- The survey form itself.
We cannot change the way that the rates appear in the email because we don't have control over how email clients are handling things. Not to worry, there's a workaround for that: you can configure the survey settings in a way that the email contains a link to the survey, not the rating scale, see screenshots with examples:
1. This is how a survey email looks for the recipient if you select Rating Form on the Content tab:
2. if you select Web Link on the Content tab:
B.
Now regarding the survey form this is the place where I suggested that you can use css, and here's how you do it:
- Write what you need a user to see in the survey form, here's an example.
Note1: you can use variable placeholders to personalize your surveys ($$reporter$$ will change to a username in the survey form.
Note2: you have to include #form and #SdQuestion in the end. This shows the form with questions that you set up in the survey.
- Click the </> button to open the source.
- Paste the css style for the rates to the end, after everything you have. I highlighted the css part that I pasted.
- Save everything, send survey, enjoy the results.
Here's an example of css that I used (I highlighted the parts where image paths are used):
<style>
.cpime-rating-star input[type="radio"] + label
{background-image:url(https://cdn0.iconfinder.com/data/icons/siberian-husky-emoticons-1/512/Angry-Emoji-Emotion-Face-Expression-Feeling-512.png);background-size:36px 36px;border-radius:5px;background-repeat: no-repeat;display:inline-block;margin:0px;width:36px;height:36px;}
.cpime-rating-star input[type="radio"]:checked + label
{background-image:url(https://cdn0.iconfinder.com/data/icons/siberian-husky-emoticons-1/512/Smile-Emoji-Emotion-Face-Expression-Feeling-shiba-512.png);background-size:36px 36px;border-radius:5px;}
.selected
{background-image:url(https://cdn0.iconfinder.com/data/icons/siberian-husky-emoticons-1/512/Smile-Emoji-Emotion-Face-Expression-Feeling-shiba-512.png) !important;background-size:36px 36px;border-radius:5px;}
</style>
When you paste this after your content in the Form Body field (in the source, not just in the field!), you will see Husky dogs instead of the stars, like this image below. Note how I selected the 4th rate so there's 4 happy huskies & one angry husky.
Here's another example that my dev team shared, it has funny rates that can be used for surveys during Halloween time, so you can have some fun if you celebrate this holiday of course. I also selected the 4th rate there so you see 4 happy pumpkins.
Here's a css style for this, and I also highlighted the paths to the images that my devs used.
<style>
.cpime-rating-star input[type="radio"] + label
{background-image:url(http://www.iconsearch.ru/uploads/icons/iconslandvistahalloween/64x64/sad.png);background-size:36px 36px;border-radius:5px;background-repeat: no-repeat;display:inline-block;margin:0px;width:36px;height:36px;}
.cpime-rating-star input[type="radio"]:checked + label
{background-image:url(http://www.iconsearch.ru/uploads/icons/iconslandvistahalloween/64x64/smile.png);background-size:36px 36px;border-radius:5px;}
.selected
{background-image:url(http://www.iconsearch.ru/uploads/icons/iconslandvistahalloween/64x64/smile.png) !important;background-size:36px 36px;border-radius:5px;}
</style>
Another fun example is the background you can use for the surveys and while I can't find the css code for it unfortunately, I wanted to share with you so that you get the idea of how much you can do to brand your surveys.
OK, if you survived till this, thank you for your commitment with our surveys! 
Give it a try, I hope the examples helped you get a sense of what you can do, and do let me know how it goes, I'd be happy to help if you have any additional questions.
Best,
Natalia
Hi John,
Just wanted to share with you the status. I was playing around with survey settings and found a tweak that you could use for the survey email, that is you can display the link to the survey form as an image as opposed to the link with words. And that image could look like those smiling faces:
Note that each separate face is not a separate link, so when you click on the image, you will just be redirected to a survey form page where you select the actual rating for the survey. But this appearance in the email could potentially be more appealing for your users?
Regarding the second item which is displaying each separate rate in the survey form as a different image - that one is still in progress, and I'm yet to hear from the developers whether this is possible with CSS alone or this is something that can only be implemented as a new feature in the plugin.
Thanks and I'll keep you posted once I find more.