Qualtrics Tutorials: Kent State Look & Feel for Qualtrics Surveys

The Look & Feel editor in Qualtrics makes it much easier to customize the colors, fonts, and overall theme of a survey. In this tutorial, we'll go over how to make some simple tweaks to your survey's Look & Feel that will bring it in line with the Kent State look.

To access the Look & Feel editor, navigate to the Survey Editor, then click the "paint roller" icon:

The Look & Feel editor has seven sections:

Theme: Optionally choose one of Qualtrics's pre-built looks. The first four options (Desktop, Glacier Mountains, Mountain Valleys, Cherry Blossom) are all image-based. The last option, Blank, is ideal for customizing.

Layout: Choose one of four display options for multiple choice questions:

• Flat (default): Answer choices are placed inside a "rectangle" with a distinct background color to make them stand out from the survey background. The traditional checkbox and radio button shapes are presented to the left of the answer text.
• Modern: Answer choices are placed inside a "rectangle" that uses an outline around the answer choice. It includes the checkbox and radio button shapes to the right of the answer text.
• Classic: Answer choices are placed inside a rectangle with a distinct background color to make them stand out from the survey background. Unlike the other templates, no checkbox or radio buttons are displayed next to the answer text.
• Simple is a newer template. Note that not all question types work with the Simplified template.

All four templates are mobile-friendly, so your surveys will look good and function well on desktop computers and mobile devices.

General: Controls options that apply to all pages of the survey, including: customizing the labels for the Next and Previous buttons; adding a header (content to display at the top of every survey page); adding a footer (content to display at the bottom of every survey page); adding a progress bar at the top or bottom of the survey page.

Style: Set the colors for the major survey elements (next/previous buttons, selected answers, and banner header), as well as fonts, font sizes, and question spacing.

Motion: Controls animation effects for page transitions, and has options for automatic transitions between questions.

Logo: Optionally add a logo image to top of survey. Logo images can be displayed in a "banner" style (works best if logo has a transparent background) or as a floating logo.

Background: Set the overall background color or image, and/or add a white background "container" behind the question (can make questions easier to read if using a background image).

If you want to apply a Kent State look to your surveys, you can apply the following settings in your survey's Look & Feel section. Before you get started, head over to the official Kent State Brand Guidelines (www.kent.edu/brand) page to download the high-resolution logos and color codes.

Theme: Blank

Layout: Flat

General:

• Next button text: Use words instead of symbols
• Previous button text: Use words instead of symbols
• Progress bar: User's preference
• Progress bar position: User's preference

NOTE: We typically do not recommend using the Questions Per Page option, especially if your survey uses any skip, display, or branch logic. (The Questions Per Page setting may interfere with the execution of the logic.)

Style:

• Primary color: #003976
• Secondary color: Same as primary color, or one of the selections from kent.edu/brand. If different from the primary color, will only change the color of the next/previous buttons.
• Font: Arial or Helvetica
• Foreground contrast: Medium or High
• Question Spacing: User's preference
• Question text: 24px
• Answer text: 18px or 20px or 22px

Motion:

• Page transition: Slide or None
• No other options selected

Logo:

• Logo Image: Download the "Kent State University horizontal" zipped archive from the Kent State brand guidelines website and extract the PNG image files. If using Style="Floating", use any of the logos with dark text on a transparent background. If using Style="Banner", use the logo with white text on a transparent background.
• Style: Floating or Banner
• Placement: Centered
• Max Height: 70px
• Mobile scaling: 66%

Style=Banner

Style=Floating

Background:

• Background Type: Color
• Background Color: #fefefe or #ffffff
• Foreground Contast: Medium or High
• Questions Container: User's preference

While the new Look & Feel builder makes it much easier to customize the appearance of your surveys, there are some customizations that may still require using CSS. These include:

• Fonts other than the options on the Style tab (Arial, Georgia, Helvetica, Tahoma, Times New Roman)
• Background colors for unselected answer options
• Font sizes for row or column labels in matrix table questions
• Spacing between fields in a Text Entry > Form question