Survey Platform - Advanced Look & Feel | Qualtrics

Advanced Look & Feel Settings

Introduction

If you want to get into the nitty-gritty details of your survey’s appearance, head into the Advanced tab of the Look & Feel menu. From here, you can add a header and footer that will appear on each page of your survey, or you can personalize your survey theme even further with custom CSS.

image10

Inserting a Header

You can add a header to your survey to create content that will appear at the top of each page, like a custom company logo or survey title.

image17

Qtip: Need a header for just one page? Try the Descriptive Text question instead. This question displays information without asking for feedback and is perfect for instructions or section headings.

To add a Header

  1. Navigate to the Survey module and open the Look & Feel menu.image03
  2. Click the Advanced tab.image10
  3. Enter your header content directly into the text box or click Edit to access Rich Content Editor.image00

    Qtip: You can also click the blue dropdown, choose the appropriate library, and click New Message to access the Rich Content Editor and create a header that can be used in multiple surveys.

    image01

  4. Within the Rich Content Editor, add and format text and/or images.image11
  5. Click Save when finished.image05

Inserting a Footer

A survey footer allows you to create content that will appear at the bottom of each page, like help information or a custom company logo.

image09

To add a Footer

  1. Navigate to the Survey module and open the Look & Feel menu.image03
  2. Click the Advanced tab.image10
  3. Enter your footer content directly into the text box, or click Edit to access the Rich Content Editor.image04

    Qtip:  You can also click the blue dropdown, choose the appropriate library, and click New Message to access the Rich Content Editor and create a footer that can be used in multiple surveys.

    image13

  4. Within the Rich Content Editor, add and format text and/or images.image06
  5. Click Save when finished.image08

Translating Header / Footer Text

  1. When in the Advanced tab of the Look & Feel menu, click the Header or Footer blue dropdown, choose a library, and click New Message.image13
  2. Type the header / footer text in your base language, give your message a description, and save the message.image02
  3. Navigate to the Library section and open your Messages Library.image14
  4. Select the Look and Feel message type, click the gray gear dropdown next to your message, and select Translate Message.image19
  5. Translate your message according to the guidelines in our Translate Survey page.

Once your message is translated, respondents will see the Header / Footer text in the language they’ve selected for their survey.

Qtip: Want to go back to the default header / footer text? Select Use Fixed Text, found in the blue dropdown menu.

image07

Adding Custom CSS

Attention: Custom coding features are provided as-is and may require programming knowledge to implement. Our support team does not offer assistance or consultation on custom coding at this time.

Sometimes you may want to alter the Look & Feel of your survey beyond the simple click-to-change formatting options available. For those tech-savvy folks who want to dive into coding the layout of their survey, we offer the option to add custom CSS.

Cascading Style Sheets (CSS) is a coding language used to style website pages. With the Add Custom CSS feature, you can type your own CSS directly into the CSS editor or point to a CSS file hosted online.

To add custom CSS

  1. Navigate to the Survey module and open the Look & Feel menu.image03
  2. Click the Advanced tab.image10
  3. Insert a URL into the External CSS box to use CSS that is hosted online or click Add Custom CSS to type in your own CSS.image18
  4. If you’re in the CSS Editor, enter your CSS text and click Save.image16

Qtip: The code above will change the color of your survey’s Next button to blue. Another common bit of code allows you to remove the default logo on your theme. To do this insert the following CSS code into your editor:

html .Skin #Logo {display: none;}