SurveyMonkey
Use CSS to style your survey
ENTERPRISE FEATURE: If you're interested, contact sales. If you already have an Enterprise account, contact your Customer Success Manager.
You can create a custom theme to make global style changes. Use the text formatting toolbar to make style changes unique to a specific survey question.
Enterprise Primary Admins can add CSS to create a custom survey theme to brand the look of your survey.
Creating a Custom CSS Theme
Primary Admins can add CSS for a custom survey theme that matches your visual assets, fonts, colors, and style preferences.
To add a new Custom Theme to the library:
- Select My Team from the main navigation and select Library.
- Select + New Item (Add item).
- Choose CSS Theme.
- Select Copy code and paste in your preferred CSS editing tool.
- Make customizations to the code and then see a preview by adding it to the box under Customize theme and selecting Generate preview.
- Select Save.
TIP! Preview your Custom CSS theme before sending out your survey.
- Using Survey Preview to see your CSS Custom Theme
Updating a Custom CSS Theme
Once a Custom CSS theme has been saved, only the Primary Admin can edit or change the page elements.
To edit a Custom Theme:
- Select My Team from the main navigation and select Library.
- Select ... and click Update.
- Choose CSS Theme.
- Select Copy code and paste in your preferred CSS editing tool.
- Make customizations to the code and then see a preview by adding it to the box under Customize theme and selecting Generate preview.
- Select Save.
Team members aren't able to change or edit individual elements of a survey with a Custom CSS theme applied.
Customizing page elements
General Properties
| CSS Property | String Value |
| Font Family | Your organization may have a preferred Font Family. You can also check out CSS Web Safe Fonts for more ideas. |
| Font Size | A number eg. 32px |
| Color | Use a color picker to generate your color's RGBA value. |
| Background Color | Will either be a HEX code or RGBA value. |
Page Title
You can add Page Titles to the different pages in your survey to keep it nice and organized.
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
TIP! Use a color picker to generate your color's RGBA value, or hex code.
- Changing the font style
- Changing the font weight
- Changing the text decoration
Survey Title
The survey title will appear at the top of each survey page as your respondents take the survey, unless you choose to hide the title.
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- Changing the font style
- Changing the font weight
- Changing the text decoration
Survey Page
The background color that appears behind the questions in your survey. The survey background color will only show if you haven't added a background image.
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
TIP! Use a color picker to generate your color's RGBA value.
Question Title
You can customize how the question text will look in a variety of question types.
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Changing the font style
- Changing the font weight
- Changing the text decoration
Question Body
You can customize what the answer choices will look like to respondents, as well as question types that use a highlight color when selected. For example, a Multiple Choice question.
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- Changing the font style
- Changing the font weight
- Changing the text decoration
Button
People taking your survey use these buttons to navigate through a survey. When a respondent clicks the Next or Done button on each page of the survey, responses are saved and submitted.
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- Changing the font weight
Error
Error messages are shown to respondents if they leave a required question blank, or if their answer doesn't meet the required range or limit.
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Changing the font style
- Changing the font weight
- Changing the text decoration
Exit Link
Exit links are shown in the upper-right corner of every page, allowing respondents to exit the survey without saving the responses entered on the current page.
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- Changing the font weight
Page Layout
You can use the page layout to choose how and where your background color or image is displayed.
#pageLayout {
layout: banner;
opacity: 0.0;
}
TIP! Set the opacity to 100 to have a solid background color.