Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

There are two places where a survey recipient can see the rates:

  1. Email
  2. Survey form itself20384759
  3. 20384759 

Email

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 Email tab:
    Image Removed
    Image Added

  2. If you select Web Link on the Email tab:
    Image Removed
    Image Added

  3. You can display the link to the survey form as an image as opposed to the link with words. That includes the smileys: you can configure the rating scale to appear as sad / happy smiling faces for your users or whatever image that you want.
    And that image could look like those smiling faces:
    Image Removed
    Image Added

    Info

    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


...

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

    Image RemovedImage Added


  2. Click the </> button to open the source.
  3. Paste the css style for the rates to the end, after everything you have. 


    ExamplesCSS style
    Husky dogs

    When you paste the code below after your content in the Form Body field (in the source, not just in the field!) on the Form tab, you will see Husky dogs instead of the stars, like this image below.

    Code Block
    collapsetrue
    <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>

    Note, you can see that as soon as 4th rate was selected so there's 4 happy huskies and one angry husky.

    Image RemovedImage Added

    Halloween time

    Another example that you can use with funny rates that can be used for surveys during Halloween time, so you can have some fun if you celebrate this holiday, of course.

    Code Block
    collapsetrue
    <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>

    4th rate was also selected there so you see 4 happy pumpkins.

    Image RemovedImage Added

    Surveys background

    Another fun example is the background that you can use for the surveys.

    Image Added

    Submit button

    Here is the html example that can help you to change the button colour, not the text

    Red button example
    <style>
    .

    Image Removed

    survey-button

    { background: #FF0000!important;}

    </style>



  4. So, this is what we wanted to share with you so that you get the idea of how much you can do to brand your surveys. Save everything, send survey and enjoy the results.


Give it a try, we hope the examples helped you get a sense of what you can do, and do let us know how it goes, we would be happy to help if you have any additional questions.

Creating a new survey

FAQ section for Surveys for Jira