SurveyMonkey
Use CSS to Style Your Survey
Enterprise Primary Admins can add CSS to create a custom survey theme to brand the look of your survey.
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.
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.
- 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.
Customizing Page Elements
Here are the page elements you can customize with CSS.
General Properties
| CSS Property | String Value |
| Font Family | Your organization may have a preferred Font Family. Currently you can only use fonts listed in CSS Web Safe Fonts. |
| 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;
}
- 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);
}
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
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;
}