Survey appearance
Customize the appearance of surveys
Use the settings on the Appearance page to customize your survey. After you make changes, you can view them by clicking Preview in the top right corner of the page. You can also test your survey.
If you want a professional design for your survey, contact your Medallia expert.
To set up your survey's appearance, it is important to know which settings affect which part of your survey. To view the Appearance settings, complete the following steps:
- Select Settings > Appearance.
Make a selection from the appearance options. The sections below describe each available option.
Themes
See Applying themes to surveys for details on themes.
Logo / Banner
A banner is an image or colored bar that appears on top of each survey page. It is usually rectangular in shape and has the same width as your survey. When you do not use a frame (see below), your banner size will automatically adjust to the available screen size of the device on which the survey is being filled out.
- None — No banner will be shown.
- Media library — Select an image from your media library or upload a new image.
- URL — Enter a hyperlink to the banner's location.
- Color — Instead of an image, you can also use a colored bar. Select the color of the bar.
- Alignment — If your banner is not the same width as your survey, select whether to align it to the left, center, or right.
- Link — Add a hyperlink to where respondents who click your banner will be redirected (e.g., your website).
Show / Hide screen elements
- Show question numbering — If you select this option, the question numbers will be shown as configured on the survey details page. If you are using branching or page display logic, it is recommended that you turn off your question numbering.
- Show 'Back' button — Respondents can go back to a previous page using this button.
- Show 'Pause' button — Respondents will receive a URL to which they will be able to go 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 — Select this to show a frame.
- Background color — Color of the frame.
- Border color — Color of the frame's inner border and also the survey's border.
The following image shows a survey with a frame:
The following image shows a survey without a frame:
Background image
Instead of a frame, you can use an image to show around the survey questions.
- None — Select this if you do not want to show a background image.
- Media library — Select a file from your media library or upload a new image.
- URL — Enter a hyperlink to the background image's location.
- Repeat — If you have selected an image and your image is smaller than the available screen size, you can choose to repeat it using the following settings:
- no-repeat —The image will be shown once in its actual size.
- repeat-x — Refers to the x-axis (i.e., the image will be repeated horizontally). This is useful if you have a small and long image.
- repeat-y — Refers to the y-axis (i.e., the image will be repeated vertically). This is useful if your image is wide.
- repeat — The image will be continuously repeated, both horizontally and vertically.
- fit — The image will be scaled so that it appears across the entire available screen size of the device on which your survey is being filled out.
- left-bottom — The image will start from the bottom-left corner of the screen.
Page
These settings are for the survey page, which is the area in which questions are shown.
- Background color — The survey's background color. Note: This is not the same as the frame color.
- Font color — Font color of the text on the survey page as well as the introduction, thank you page, etc.
- Font — Font type of the text on the survey page as well as the introduction, thank you page, etc.
- Font size — Size of the text on the survey page as well as the introduction, thank you page, etc.
- Width — Maximum width of the survey area. If a screen is smaller than the defined width, the 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 — Where the survey will appear on the page. This setting is important when you make use of a frame.
Heading
- Background color — The heading's background color.
- Font color — Font color of the text in the heading.
- Font — Font type of the text in the heading.
Questions and sub-questions
The following settings are the same for both the Questions and Sub-questions sections.
- Background color — The question's background color.
- Font color — Font color of the question text.
- Font — Font type of the question text.
Response
- Background color — The response's background color.
- Font color — Font color of the response text.
- Highlighted — Highlight color of the response.
- Font — Font type of the response text.
Button
These settings apply to the Next and Finish buttons. You cannot customize the Back button.
- Background color — The button's background color.
- Font color — Font color of the button text.
- Font — Font type of the button text.
Input fields
The settings refer to the input fields of open questions.
- Background color — The input field's background color.
- Font color — Font color of the text in the input fields.
- Border color — Highlight color of the input fields.
- Font — Font type of text in the input fields.
Progress bar
None — Do not show a progress bar.
Percent bar — A bar shows the exact percentage. Select the colored circle to pick a color for the progress bar.
Alignment — Where in the survey the progress bar will be located.
Images for social media sharing
Increase the response rate by adding a title, description, and image when sharing your survey on social media or via a messaging platform like Whatsapp. See Using images in social media surveys for details.
- None — No image will be shown.
- Media library — elect an image from your media library or upload a new image.
- URL — Enter a hyperlink to the image's location.
- Title — Title of the image.
- Description — Description of the image.
Custom CSS
Use your own CSS to customize the look of the survey. This is an advanced optional setting that can be left blank.
