Loading...
  • Customer Experience
    Customer Experience
  • Employee Experience
    Employee Experience
  • Brand Experience
    Brand Experience
  • Product Experience
    Product Experience
  • Core XM
    Core XM
  • Design XM
    Design XM

Survey Style & Motion

What's on This Page:


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


Qtip: If your Look & Feel editor looks different than what is shown here, chances are you’re on the old editor! See The Old Look & Feel for more details.

About Survey Style & Motion

Your survey’s style is important for making sure respondents enjoy taking your survey. This includes your survey’s font, colors, question spacing, and any custom CSS you’d like to add. You can also customize how your survey moves, from setting a page transition animation to automatically advancing respondents through your survey as they answer questions.

Fonts

You can change the font of your questions and answer choices in the Style section of the Look & Feel menu. To change your font typeface, click the Font dropdown and select a typeface.

image of the style tab in the look & feel editor. The font dropdown menu is selected.

You can also customize the size of your survey’s font. This includes bolding the font as well as giving your survey questions and answers different font sizes.

To change the font size, type the desired font size (in pixels) into the font size box. Click the B icon to the right of the font size to bold your text.
image of the style tab in the look & feel editor. The Question text sizing options are enabled and the Bold button is called out.

Qtip: The font customization options offered here are optimized for survey best practices and accessibility. For a few additional options, such as applying italics or underlines to your entire survey’s text, navigate to the Old Look & Feel menu.

Default Fonts

The font selection dropdown has an option for a Default font. Depending on your selected layout, the default font is different:

  • The Flat layout uses Poppins as the font typeface.
  • The Modern layout uses Open Sans as the font typeface.
  • The Classic layout uses Helvetica Neue as the typeface.

Colors

You can change the color of items within your survey in the Style section of the Look & Feel menu. From this section, you can customize the primary and secondary colors of your survey.

Image of the style tab in the look & feel menu. The primary and secondary colors options are highlighted at the top of the window

Qtip: The color customization options offered here are optimized for survey best practices and accessibility. The Old Look & Feel menu offers additional options for setting colors for specific survey elements like choice text and validation errors.

Primary Color

The primary color of your survey applies to the main elements of your survey. This changes depending on your survey layout, but usually applies to colors of features like the Progress Bar and question highlights.

image of the style tab of the look & feel menu. The primary color option has been changed, which changes the color of the progress bar and the question outlines in the survey.

Secondary Color

The secondary color of your survey applies to minor elements of your survey. This changes depending on your survey layout, but usually applies to features like the Next and Back buttons.
image of the style tab in the look & feel editor. The secondary color option has changed, which has changed the color of the next/back buttons in the survey

Add Custom CSS

Attention: The following code is provided as-is and requires programming knowledge to implement. Qualtrics Support does not offer assistance or consultation on custom coding. You can always try asking our community of dedicated users instead.

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 to your survey:

  1. Navigate to the Survey tab and open the Look & Feel menu.
    image of the survey editor window the the look & feel menu option highlighted
  2. Click the Style section.
    image of the style tab in the look & feel menu. The Custom CSS fields are highlighted
  3. Enter your own CSS in the Custom CSS box.
    Qtip: If you need more space to build your CSS, click edit below the Custom CSS box to pull up the CSS Editor.
  4. If you are using CSS that is hosted online, enter the URL for the online host in the External CSS box.
  5. Click Save.

Qtip: The below bit of code allows you to remove the default logo on your theme. To do this, copy the following CSS code into the Custom CSS editor:

html .Skin #Logo {display: none;}

Foreground Contrast

Foreground Contrast determines the level of contrast between the foreground (text, text boxes, etc.) and the background image. You can choose between Low, Medium, and High contrast. If your survey’s text is hard to read against the survey background, increasing the Foreground Contrast may help improve readability.

To determine this, we select a gray scale color that adheres to a proper contrast ratio of 4.5, which is WCAG compliant. To increase the contrast between the text and background, change this to Medium or High. High is always white or black. We also take into account the background image and overlay color/opacity when determining the proper foreground color. This setting is the same as the Foreground Contrast found in the Background section.

image of the style tab in the look & feel menu. The foreground contrast option is selected.

Question Spacing

Question Spacing determines the amount of space that separates your survey questions. You can choose spacing that is Compact, Comfortable, or Extended. Changing your survey’s question spacing can allow you to control your survey’s length. For example, decreasing the spacing between your questions makes it easier to design a survey that fits on one page.
image of the style tab in the look & feel menu. The question spacing option is highlighted

Look & Feel vs. Rich Content Editor

Fonts and text color can be edited two ways: globally and locally. Global style changes are made in the Look & Feel menu and affect all question and/or answer text. Local style changes are made in the Rich Content Editor for that specific question or answer choice. Local changes override global changes, so if you make a change in the Rich Content Editor of a question, you will see those settings instead of whatever is set in the Look & Feel.

You can use Strip Formatting to quickly remove all local formatting from selected questions and let the global changes take effect uniformly.

To strip formatting

  1. Select all of the questions by clicking on the first question, scrolling to the bottom, holding down shift, and clicking the last question. Selected questions will have a marked checkbox next to their question number.
    image of the survey editor. two questions are selected.
  2. Go to Tools.
    image of the survey editor. The tools menu is selected. The Review option is highlighted and the strip formatting option is selected
  3. Hover over Review and select Strip Formatting.

Page Transition

The Page Transition option in the Motion section allows you to specify the transition effect that plays when respondents navigate through your survey’s pages.
image of the motion tab of the look & feel editor. The page transition dropdown menu is selected.

Below is an overview of each Page Transition type:

  • None: No page transition will play. Each page of your survey will load like a normal web page.
  • Slide: When a respondent clicks the next or back button, the subsequent page will slide into the screen from the side.
  • Fade: When a respondent clicks the next or back button, the subsequent page will fade into view while the prior page will fade out of view.
  • Flip: When a respondent clicks the next or back button, the page will “flip” over and reveal the subsequent page.

Autofocus

The Autofocus feature in the Motion section fades all survey questions besides the one the respondent is currently viewing. This can help keep survey respondents from being distracted by previous or upcoming survey questions.

image of the motion tab of the look & feel menu. The autofocus option is selected and the survey preview window shows how questions look when focused and unfocused

Autoadvance

The Autoadvance setting in the Motion section automatically moves respondents through your survey as they answer your questions. There are multiple settings you can use to control the survey taking experience.
image of the motion tab in the look & feel menu. The autoadvance question options are highlighted

  • Autoadvance on Questions: This option lets respondents advance past questions without scrolling the page. Instead, they will automatically advance to the next question as soon as they select an answer. When Autoadvance on Questions is enabled, a Done button will appear after certain question types, like text entry and multi-select multiple choice questions. Respondents can click this button to continue to the next question.
    Qtip: This setting must be enabled to use the other Autoadvance features.
  • Hide Autoadvance Button: Enabling this option will hide the Done button that appears when Autoadvance on Questions is enabled.
  • Autoadvance on Pages: This option lets respondents advance past pages without clicking a Next button. Instead, they will go to the next page as soon as they select an answer to the last question on the page.
    Qtip: Autoadvance on Pages will introduce the Back button into your survey even if it isn’t enabled in your Survey Experience

Once you enable Autoadvance, it is enabled for every page in the survey. Autoadvance is compatible with Back buttons.

Qtip: If you include an inline email question in a survey invite, and your survey only has one question, Autoadvance will not automatically submit the survey.

FAQs