Customize your survey style

Updated September 30, 2026

A style sets your survey’s fonts, colours and layout. Add CSS for details the style editor does not cover. Your CSS appears in the preview, on the public survey link and in surveys embedded on your website.

Where to add your CSS

Open the survey, go to Compose → Preview and open Advanced in the style panel. Tick I know what I’m doing to show the CSS editor. The preview shows your changes as you type. Editing the style creates a copy for this survey called My custom style. Save the survey to publish your changes.

To use the style in other surveys, choose Save as workspace style.

Examples

Each example works on its own. Combine the ones you need.

For colours, use palette variables such as var(--primary), var(--foreground) or var(--muted-foreground). They update when you change the palette, including its light and dark variants.

Question text in your brand colour

.question-title {
    color: var(--primary);
}

Larger question text

.question-title {
    font-size: 1.5rem;
}

Bigger buttons on rating scales

For NPS and other numeric rating scales that use buttons:

.question-type-interval-scale button {
    height: 3.5rem;
    font-size: 1.5rem;
}

Thicker progress bar

.survey-progress {
    height: 6px;
}

Hide the step count

Removes “Step 2 of 5” from between the buttons:

.survey-navigation-step {
    display: none;
}

Round navigation buttons

.survey-navigation-next,
.survey-navigation-submit {
    border-radius: 9999px;
}

Narrower question and navigation columns

Set both widths so the navigation stays in line with the questions:

.survey-content,
.survey-footer-content {
    max-width: 36rem;
}

Shadow above pinned navigation

Use the desktop and phone settings separately. Each can pin the navigation to the bottom of the screen:

@media (min-width: 640px) {
    .survey-shell[data-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

@media (max-width: 639px) {
    .survey-shell[data-phone-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

Survey headings

This colours every h1 and h2 on the survey page, including text blocks and the completion page title:

h1,
h2 {
    color: var(--primary);
}

Page structure

Use the class names below in your CSS. We keep them stable between releases. Other class names on the page are internal and can change without notice.

Survey pages share this structure. Progress, questions and navigation appear only on the screens that need them:

  • .survey-shell - the whole page
    • .survey-header - the bar at the top, with the inner box .survey-header-content
      • .survey-progress - the progress track
        • .survey-progress-bar - its filled part
    • .survey-main - the space between the two bars
      • .survey-content - the main content column
        • .survey-questions - the questions on this page
    • .survey-footer - the bar at the bottom, with the inner box .survey-footer-content
      • .survey-navigation - the navigation row
        • .survey-navigation-back - Back
        • .survey-navigation-step - “Step 2 of 5”
        • .survey-navigation-next - Next
        • .survey-navigation-submit - Submit Survey

A single-page survey has no progress bar, and its question screen has only a Submit Survey button. Back appears from the second page on.

Questions

Every question is a .question, containing:

  • .question-title - the question text
  • .question-required - the * of a required question, inside the title
  • .question-description - the help text under the question
  • .question-answer - the answer input
  • .question-error - the message shown when an answer is missing or invalid

To style one type of question, add its type class, for example .question-type-select-one .question-title:

  • .question-type-string - open-ended text
  • .question-type-number - number
  • .question-type-date - date
  • .question-type-boolean - yes/no
  • .question-type-select-one - single choice
  • .question-type-select-many - multiple choice
  • .question-type-ranking - ranking
  • .question-type-interval-scale - numeric rating scale, such as NPS
  • .question-type-ordinal-scale - ordinal rating scale
  • .question-type-matrix - matrix
  • .question-type-open-list - open list
  • .question-type-payment - payment

Layout settings

.survey-shell carries the choices from the Layout section as attributes, so your CSS can follow them:

  • data-navigation - flow when the buttons follow the last question, sticky when they are pinned to the bottom of the screen
  • data-align - top or center, the content position

On screens narrower than 640px, the phone settings apply. Target them with data-phone-navigation and data-phone-align, as in the shadow example above.

What is not allowed

To protect respondents, a survey cannot be saved with CSS that:

  • uses @import, image-set() or src(), or uses url() without a data: URL
  • adds fonts with @font-face. Pick a font in the Fonts section instead
  • selects on [value], [checked] or [selected], which could reveal answers
  • contains invalid CSS or the sequence </
  • is longer than 50,000 characters