Survey CSS snippets
Use your own CSS to customize the look of your surveys to match your branding and design needs. By adding custom CSS, you have total control over every aspect of the survey style. You can add you CSS on the survey appearance page which you can find in each survey via Settings > Appearance.
The custom CSS can also be saved in themes and reused across multiple surveys.
The example CSS snippets below can be used directly in your survey, or you can use them as a starting point for your own cool survey designs. If you want to have a specific design but you don't have any knowledge or CSS or do not have the time, you can contact our design team to provide you with a price quote for a custom design.
See this link for more information on CSS. The following sections contain survey CSS examples.
Custom CSS webfont
You can use custom fonts in your survey by using Google Webfonts.
- Go to Google Fonts and find the font that you want to use.
- Select the font by clicking the + sign, next a black box will appear on the bottom of the page.
- Click the black box, to open the drawer.
- Copy the CSS code @import url('https://fon….
- Paste the @import code on the first line, before all other CSS code in your survey
In the example below we used the Raleway webfont.
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
Hiding radio buttons
The CSS snippet below will hide the radio buttons and/or checkboxes in your survey.
Customizing the text of the Next button
The CSS snippet below will modify the text of your survey's "next" button. The same principle can be used to change the text of the 'Previous' or 'Finish' button.
We added some comments in the snippet that explains how to target specific survey languages in your survey.
Customizing the text of the Finish button
The CSS snippet below will allow you to change the text of your surveys finish button. In the example below, we replaced the Finish text with Confirm your vote.
Customizing text button sign-in page
The following CSS snippet will modify the text of the buttons on the sign-in page.
Changing the handle slider question type
The CSS snipped shows that you can change the Slider's handle by another icon.
The icon we used in this example, is a heart icon.
- Upload the image that you want to use in your media library.
- Resize the icon in your media library using the resize tool:
Double click the image to get the full image URL.
Displaying a full-width progress bar at top of survey
Show a full width progress bar over the full width of your survey.
The color of the progress bar can be set in the Progress bar tab of your surveys appearance.
Displaying a full-width banner and footer
By default, de selected banner will be displayed at the width in pixels of your survey. The CSS snippet will show the banner across the entire width and top of the survey.
Customizing message text for blank questions
When the respondent forgets to answer a question, he will be notified by a message 'you forgot to answer a question'. When you have the need to personalize this, you can do this using some custom CSS.
If your survey has more than one language, place this front of the styles: ':lang(en)>'. Repeat for each language, replacing 'en' by the correct language code. For example:
Hiding scale values above matrix columns
The CSS snippet below will allow you to hide the scale value above matrix question columns.
Centering report title in PDF
The CSS snippet below will make sure your report title is centered inside the PDF or when printing.
To apply this snippet in your report, open the report for editing, open the main menu, choose Style and scroll down to Custom CSS.
Customizing the color of thank-you pages
Use the CSS code below to change the colors of the thank you pages. There are two kinds of thank-you pages: The normal one and the alternate thank-you page. In this example, we set the normal thank-you page to green with white text and the alternate thank-you page to red with white text.
Customizing the width of columns in matrix questions
Use the CSS below to alter the width of the first column of your matrix question.
Use the CSS below to change the width of the second and last column in the matrix question so the label fits the cells.
Hiding the Next button on a specific page
To hide the next button on a specific page, use this:
Here we are hiding it on page 2. To hide it on a different page, just change the '2' to the correct page number.
Hiding Next button until end of video
To hide the next button until the respondent has fully viewed an embedded video, use the class disableNextTillEndVideo in the embed code you are using. Use this in a text / media element in your survey.
Example:
Adding a color scale NPS question
Use the CSS below to add a color scale to your NPS question:
Changing the appearance of a survey radio button and/or checkbox
Use the CSS snippet below as a starting point to change the appearance of a survey radio button and/or checkbox. The CSS snippet will change the default appearance of a bordered icon where, when selected, the inside of the radio button or checkbox will be colored. The CSS snippet will also change the appearance of the matrix questions (single and multi select).
More information about the NPS question can be found as follows: