Customize Your Survey Style

CSS controls visual styling. These snippets adjust colors, fonts, and design in your surveys. Copy and modify 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 a snippet causes issues, remove it. For advanced customization, consult your design or development team.

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;
}

Animation Example: Blinking Title

Demonstrates CSS animations.

/* Blinking title animation */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

h1 {
    animation: blinker 3s linear infinite;
}