Help Center

Survey appearance

2 comments

In order to optimally set up your survey’s appearance, it is important to know which settings in the Appearance menu change which part of your survey. Below you will find an overview of all settings in the Appearance menu. (You will reach this page by going to Settings > Appearance in your survey.)

Show/hide screen elements

  • Show question numbering: if you tick this option the question numbers will be shown as mentioned on the Edit page. If you are using branching or page display logic we recommend you turn off your question numbering.
  • Show ‘Back’ button: respondents can go back to a previous page using this button.
  • Show ‘Pause’ button: after clicking this button respondents will receive a URL via which they will be able to go back to the last page they were filling out. If respondents (accidentally) close their survey without clicking this button they can still go back to the final page by clicking on the original link in their email invitation.

Frame

The frame is the area surrounding your survey.

  • Show frame: tick this box if you wish to show a frame.
image without frame

survey without frame

survey with frame

  • Background color: this is the color of your frame.
  • Border color: this is the color of your frame’s (inner) border and thus also your survey’s border.

Background image

Instead of a frame you can also use an image to show around your survey questions.

  • None: tick this box if you do not wish to show a background image.
  • Media library / URL: select a file from your media libary, upload a new image or use a hyperlink that refers to a background image.
  • Repeat: this option appears as soon as you select a file from your media library. If your image is smaller than the available screen size, you can choose to repeat it:
    • no-repeat: the image is shown once, in its actual size.
    • repeat-x: refers to the x-axis, i.e. the image is repeated horizontally. This is useful if you have a small and long image.
    • repeat-y: refers to the y-axis, i.e. the image is repeated vertically. This is useful if your image is quite wide already.
    • repeat: the image is continuously repeated, both horizontally and vertically.
    • fit: the image is scaled so it is shown across the entire available screen size of the device on which your survey is filled out.
    • left-bottom: the image starts from the bottom-left corner of the screen.

Please note that on very small screens (such as smartphone screens) no background image is shown at all. This is due to the responsive nature of our surveys.

Page

This is your survey page, meaning the area in which your questions are shown.

  • Background color: your survey’s background color. This is not the same as the frame color!
  • Font color: the font color of the introduction, thank you page, etc.
  • Font: font of the text of the introduction, thank you page, etc.
  • Font size: size of the text of the introduction, thank you page, etc.
  • Width: the maximum width of your survey area. If a screen is smaller than the defined width your survey page will automatically adjust. When the screen is wider the survey page will be exactly this width. The rest of the screen will be taken up either by the frame color or background image.
  • Alignment: do you want the survey to appear on the left, right or in the middle of the screen? This setting is important when you make use of a frame.

Tip! If you leave a color field blank, that part becomes transparant.

Question settings

For the following question parts you can decide upon the background color, font color and font:

  • Heading: this is the text you add between heading tags in the HTML tab, for example h1, h2, h3 etc.
  • Question: these are the settings for the (main) questions in your survey. Attention! Sub-questions (as for example in matrix questions) have separate settings.
  • Sub-questions: the settings for all sub-questions in your survey. These can be the sub-questions in a matrix, but also the NPS® answer options.
  • Response: the possible answer options.

Button

The settings for the Next and Finish buttons. You can change the colors and font completely. Attention! The Back button cannot be customized.

Input fields

The background, font and border colors for the input fields of open questions.

Progress bar

The background, font and border colors for the input fields of open questions.

Custom CSS

Use your own CSS to customize the look of your survey even more. This is an optional setting that can be left blank. This is for more advanced users.

In the screenshot above, an example css code is displayed that will hide the radio buttons and check boxes in front of response options.

Take a look at our page with CSS snippets that you can use in your survey.

Conclusion

Using the above settings you can completely personalize your survey. If you want a professional design for your survey that fully matches your company’s look ‘n feel, you can of course always use our Custom design service

Net Promoter and NPS are registered service marks, and Net Promoter Score and Net Promoter System are service marks, of Bain & Company, Inc., Satmetrix Systems, Inc. and Fred Reichheld.

2 comments

Join the conversation
  • Yvonne - June, 2019 reply

    How can you hide the asterix shown when an answer is required?

    Nadia De Vriendt - June, 2019 reply

    hello Yvonne, thank you for reaching out to us. You can hide the asterisk using custom CSS. When you go to the Appearance Settings of your survey, add .req {display:none} to the custom CSS box and save these settings.

    Do take into account that the asterisks are a generic method to indicate that certain fields (questions in this case) are required. When you hide those, it may be a source of frustration for your respondents, i.e. when they don’t see any indication that a question is mandatory and leave it blank, only to receive a notification that they missed a mandatory question.

    Something to think about :-)

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.