Custom CSS in Surveys

CSS helps shape how things look. It’s the styling language of the web. While it can do advanced things, you don’t need to be an expert to get started.

Below are a few small CSS snippets you can use to adjust the look of your survey. Copy, paste, and tweak them as needed.

How to Use

1. Go to your survey: Questions → Preview → Customise current style → Advanced
2. Paste in the snippet
3. Change the details to suit your style

If something doesn’t look right, no worries—just remove it and try something else. For more advanced needs, your design or tech team can help.

CSS Snippets

Make titles match your brand color

/* Theme-coloured titles
h1 – Main title
h2 – Section title
h3 – Question text
*/
h1,
h2 {
    color: var(--primary);
}

Give questions a secondary color

/* Questions in theme primary secondary */
h3 {
    color: var(--secondary);
}

Make NPS question options extra large

/* Extra large NPS buttons */
.question-nps button {
    font-size: 1.5rem;
    padding: 1rem;
}

Edit Font size and weight

/* Make middle titles red and much bigger */
h2 {
    color: red;
    font-weight: 700;
    font-size: 3.1rem;
}

Silly blinking main title

This one’s just for fun. It shows what’s possible, but please don’t use it in a real survey.

/* Silly blinking title */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

h1 {
    animation: blinker 3s linear infinite;
}