Skip to Main Content

Qualtrics Tutorials: Kent State Look & Feel for Qualtrics Surveys

The new Qualtrics Look & Feel editor makes it easy to change the colors, images, and styles of your survey. In this tutorial, we'll show how you can quickly and easily update your survey's appearance to be consistent with the Kent State brand.

Introduction

The new Look & Feel editor in Qualtrics makes it much easier to customize the colors, fonts, and overall theme of a survey without needing to use any code. 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.

Look & Feel Sections

To access the Look & Feel editor, navigate to the Survey Editor, then click the "paint roller" icon: Paint roller icon used to access the Look & Feel section (as of June 2021).

The new 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 three display options for multiple choice questions:

  • Flat is the default, and includes the traditional checkbox and radio button shapes next to answer choices for multiple choice questions.
  • Modern also includes these shapes, but positions them on the right.
  • Classic (the default) resembles the older Qualtrics 2014 template, but uses the colors you specify on the Style tab.

Flat

Screenshot of the Flat template for Qualtrics surveys

Modern

Screenshot of the Modern template for Qualtrics surveys

Classic (default)

Screenshot of the Classic template for Qualtrics surveys

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

General: Customize the labels for the Next and Previous buttons, add a header or footer, and optionally add a progress bar at the top or bottom of the survey.

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 logo image to top of survey, as a banner 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).

Creating a Kent State Look for Qualtrics Surveys

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, since Questions Per Page can 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 kent.edu/brand 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

Using Custom CSS with the New Look & Feel Templates

The new Look & Feel builder makes it much easier to customize the appearance of your surveys, but 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