Skip to main content

Change survey design with custom CSS feature

How to design your surveys with a custom CSS feature.

Written by Anastasiia
Updated today

You can personalize elements of your survey with the custom CSS feature on the Website or in-product surveys and Email or Shareable link surveys.

📌 This feature is available on some of the plans. Please visit our Pricing page or reach out to us to learn more.

💡To find the class of the survey element you wish to modify with CSS, open Devtools by clicking on the preview of the survey on the right side of the Create tab and find the name of the class in Devtools by inspecting the element.

Please note that we do not provide support for custom CSS-related issues. We recommend consulting your onboard development team or exploring online resources for possible solutions.

Add Custom CSS

  • Move to Create ➡️ Design tab of your survey and pick the template you'd like to add the CSS.

  • Enable the Custom CSS toggle and paste your code with the Add button.

  • After you modify your CSS, save your changes by clicking Update Theme.

  • Save your changes with the Publish button.

📌 When adding CSS for the first time, remember to remove the example provided in the field.

Modifications for Website or in-product surveys

Change the font size and weight in your widget

#survicate-box * { 
font-size: 14px; 
font-weight: 100; 
}

If you want to change the size of the text Not likely and Very likely , you can use the code below:

#survicate-box .sv__nps .sv__labels .sv__label--left, 
#survicate-box .sv__nps .sv__labels .sv__label--right { 
font-size: 16px; }

Manipulate the size of your chat window and make it wider or narrower

//Make the survey narrower

#survicate-box .sv__survey.sv__micro-theme {
width: 900px;
min-width: 500px;
}
// Make the survey wider

#survicate-box .sv__survey.sv__micro-theme {
width: 800px;
max-width: 8
}

Manipulate the height of the widget for the New light theme

#survicate-box.survicate-box-WidgetSurvey .sv__micro-theme.sv__survey {
  max-height: unset;
}
#survicate-box .sv__micro-theme .sv__point-wrapper .sv__scroll-container {
  max-height: 500px;
}

Set up a custom background for your widget

#survicate-box .sv__survey {
    /* Add a custom logo as the background */
    background: url("https://developers.survicate.com/logoDark.svg") no-repeat center center;
    /* Set the background image size to 80% of the survey */
    background-size: 30%;
}

Don't forget to customize the background-size according to your needs.

Center text on a centered widget

#survicate-box .sv__micro-theme .sv__point .sv__point-text.sv__point-question { text-align: center; }

Please note text is aligned to the left by default.

Modify the color on the submit button

  • Pop-up format - without navigation button:
    ​

    #survicate-box.survicate-box-WidgetSurvey .sv__micro-theme .sv__submit-button:not(.sv__navigation-button--back) {
    font-weight: 700;
    color: white; 
    background-color: green !important; 
    font-size: 19px;
    text-transform: uppercase;
    }

  • Pop-up format - with navigation button:
    ​

    #survicate-box.survicate-box-WidgetSurvey .sv__micro-theme.sv__survey .sv__navigation-button {
      font-weight: 800;
      color: white;
      background-color: green;
      border-color: green;
      font-size: 16px;
      text-transform: uppercase;
    }

  • Feedback button format - without navigation button:
    ​

    #survicate-box.survicate-box-FeedbackButton .sv__micro-theme .sv__submit-button:not(.sv__navigation-button--back) {
    font-weight: 700;
    color: white;
    background-color: blue !important;
    font-size: 14px;
    text-transform: uppercase;
    }

  • Feedback button format - with navigation button:

    #survicate-box.survicate-box-FeedbackButton .sv__micro-theme.sv__survey .sv__navigation-button {
      font-weight: 800;
      color: white;
      background-color: green;
      border-color: green;
      font-size: 16px;
      text-transform: uppercase;
    }

Enabling survey navigation will let your respondents return to their past responses and change their response submissions.
​
To add this button open Create ➡️ Settings ➡️ Navigation.

Customizing the font size on a minimized widget

#survicate-box .sv__survey.sv__micro-theme.sv__minimized .sv__minimized__text { 
font-size: 18px; 
font-weight: 900; 
}

Change the size and position for minimized Feedback Button

#survicate-box .sv__survey.sv__micro-theme {width: 250px;min-width: 100px;top:40%;}

Rotate the second thumbs icon in the rating scale

#survicate-box .sv__survey.sv__micro-theme .sv__rating__buttons .sv-rating.sv__button[data-value="2"] svg {
  transform: rotateX(180deg)
}

#survicate-box .sv__survey.sv__micro-theme .sv__rating__buttons .sv__rating__number {
  display: none
}

Change Smiley scale order

#survicate-box .sv__survey .sv__smiley-scale__buttons, .sv__smiley-scale .sv__labels { flex-direction: row-reverse; }

Modifications for Email or Shareable link surveys

Change font size and weight on your survey page

@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&display=swap');

#survicate-box * {
  font-optical-sizing: auto;
  font-size: 14px;
  font-weight: 300;
  color: #29292a;
}

If you want to change the size of the text Not likely and Very likely , you can use the code below:

#survicate-box .sv__nps .sv__labels .sv__label--left, 
#survicate-box .sv__nps .sv__labels .sv__label--right { 
font-size: 16px; 
}

Change the progress bar size and background color

#survicate-box .sv__footer-container,
#survicate-box .sv__progress-bar-container {
  background-color: #D6B4FC;
}

Change the size of your company logo

#survicate-box .sv__logo img {
  max-height: 100px;
  max-width: 200px;
}

Expand the text area in your text question

#survicate-box .sv__text-question .sv__textarea {
  min-height: 200px;
}

Edit the button NPS® colors of the survey

#survicate-box .sv__nps button:first-child,
#survicate-box .sv__nps button:nth-child(2) {
  background-color: #B72125;
}
#survicate-box .sv__nps button:nth-child(3),
#survicate-box .sv__nps button:nth-child(4) {
  background-color: #F15223;
}

#survicate-box .sv__nps button:nth-child(5),
#survicate-box .sv__nps button:nth-child(6) {
  background-color: #FAA824;
}

#survicate-box .sv__nps button:nth-child(7),
#survicate-box .sv__nps button:nth-child(8) {
  background-color: #EDDC13;
}

#survicate-box .sv__nps button:nth-child(9),
#survicate-box .sv__nps button:nth-child(10) {
  background-color: #C5D92E;
}

#survicate-box .sv__nps button:nth-child(11) {
  background-color: #64B64D;
}

Make an NPS® border colorful 

#survicate-box .sv__nps .sv__button:first-child {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(2) {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(3) {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(4) {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(5) {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(6) {
  border: 2px solid red;
}

#survicate-box .sv__nps .sv__button:nth-child(7) {
  border: 2px solid yellow;
}

#survicate-box .sv__nps .sv__button:nth-child(8) {
  border: 2px solid yellow;
}

#survicate-box .sv__nps .sv__button:nth-child(9) {
  border: 2px solid green;
}

#survicate-box .sv__nps .sv__button:nth-child(10) {
  border: 2px solid green;
}

#survicate-box .sv__nps .sv__button:nth-child(11) {
  border: 2px solid green;
}

Change the color of the rating buttons when selected

#survicate-box .sv__rating__wrapper .sv__buttons .sv__button--selected svg {
fill: #171d1a
}

#survicate-box .sv__rating .sv__button svg:hover {
fill: #171d1a
}

Rotate the second thumbs icon in the rating scale

#survicate-box .sv__survey .sv__rating__buttons .sv-rating.sv__button[data-value="2"] svg {
  transform: rotateX(180deg)
}

#survicate-box .sv__survey .sv__rating__buttons .sv__rating__number {
  display: none
}

How to make changes to the Email template of the survey?

The above CSS modifications will be visible in your Email or Shareable link survey when it's opened in a browser on any device. However, these changes will not be reflected in the survey's first question if it's embedded in an email's body with the HTML code.

To apply advanced design modifications to the HTML code (and, with that, to the embedded question), first, copy the code from the survey's Share tab.

Then, paste the code into your email editor and modify the parts of the code you wish to change, such as font-family, text-align, and so on.

❗️Please remember not to delete any part of the survey links in the <a href="..."> parts of the code, as it may prevent the survey responses from being saved.

Change the survey's font

In your survey's Design tab, in the Font section, you will see some fonts available to select:

They are divided into 3 categories:

  • System fonts

  • General-purpose fonts

  • Language-specific fonts

When any of those fonts is selected in the theme settings, it’s applied automatically to the live survey, without the need for additional code work.
​
If you would rather apply a font that is not on the list, you can do so via custom CSS.

CSS code to add custom font to your Shareable link survey

Add your font via `@font-face` in the survey’s Custom CSS, with `url()` pointing to your font files:

/* cyrillic-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL3RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL-RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL4RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL0RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL6RWTD98Ql.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


#survicate-box * {
  font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}

CSS code to add custom font to your Website or in-product survey

a. If the font is already on your site

If the font is already loaded on your page (e.g. in your main stylesheet), you only need to reference it in Custom CSS. No @font-face is required:

#survicate-box * {
  font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}

b. If the font is not on your site

Add your font via `@font-face` in the survey’s Custom CSS, with `url()` pointing to your font files, then apply the font to the survey box. Use the full example:

/* cyrillic-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL3RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL-RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL4RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL0RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL6RWTD98Ql.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


#survicate-box * {
  font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}

💡 We recommend always adding fallback fonts (e.g. 'Open Sans', sans-serif) so text still displays if the custom font fails to load.

❗ If you're using the Survicate NPM package to add surveys to your website, this feature is available starting from version 28.18.0.

Best Practices

Customise your survey questions

Add images to your survey to maximise visual clues and design your survey look and colors to make your survey stand out and match your brand.

Personalise your survey template

Learn how to design your survey and adjust the template to suit your brand.

📞 If you have any questions or need assistance - feel free to reach out to our team via chat or email: support@survicate.com.

Net Promoter, NPS, and the NPS - related emoticons are registered U.S. trademarks, and Net Promoter Score and Net Promoter System are service marks, of Bain & Company, Inc., Satmetrix Systems, Inc. and Fred Reichheld.

Related Articles
Design your survey look and colors
Design your website survey theme and settings
What is the Feedback Button and how to create it?
Design your Email/Link survey and its embed code, and set up survey settings
Braze In-App Message surveys
Did this answer your question?