Pas de stijl van je enquête aan

Een stijl bepaalt de lettertypen, kleuren en lay-out van je enquête. Voeg CSS toe voor details die de stijleditor niet dekt. Je CSS is zichtbaar in het voorbeeld, via de openbare enquêtelink en in enquêtes die op je website zijn ingesloten.

Waar je CSS toevoegt

Open de enquête, ga naar Opstellen → Voorbeeld en open Geavanceerd in het stijlpaneel. Vink Ik weet wat ik doe aan om de CSS-editor te tonen. Het voorbeeld toont je wijzigingen terwijl je typt. Als je de stijl bewerkt, wordt er een kopie voor deze enquête gemaakt met de naam Mijn eigen stijl. Sla de enquête op om je wijzigingen te publiceren.

Om de stijl in andere enquêtes te gebruiken, kies je Opslaan als werkruimtestijl.

Voorbeelden

Elk voorbeeld werkt op zichzelf. Combineer degene die je nodig hebt.

Gebruik voor kleuren paletvariabelen zoals var(--primary), var(--foreground) of var(--muted-foreground). Deze worden bijgewerkt wanneer je het palet wijzigt, inclusief de lichte en donkere varianten.

Vraagtekst in je merkkleur

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

Grotere vraagtekst

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

Grotere knoppen op beoordelingsschalen

Voor NPS en andere numerieke beoordelingsschalen die knoppen gebruiken:

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

Dikkere voortgangsbalk

.survey-progress {
    height: 6px;
}

Verberg de stappenteller

Verwijdert “Stap 2 van 5” tussen de knoppen:

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

Ronde navigatieknoppen

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

Smallere vraag- en navigatiekolommen

Stel beide breedtes in zodat de navigatie op één lijn blijft met de vragen:

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

Schaduw boven vastgezette navigatie

Gebruik de desktop- en telefooninstellingen afzonderlijk. Beide kunnen de navigatie aan de onderkant van het scherm vastzetten:

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

Enquêtekoppen

Dit kleurt elke h1 en h2 op de enquêtepagina, inclusief tekstblokken en de titel van de voltooiingspagina:

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

Paginastructuur

Gebruik de onderstaande klassenamen in je CSS. We houden deze stabiel tussen releases. Andere klassenamen op de pagina zijn intern en kunnen zonder voorafgaande kennisgeving veranderen.

Enquêtepagina’s delen deze structuur. Voortgang, vragen en navigatie verschijnen alleen op de schermen die ze nodig hebben:

• .survey-shell - de hele pagina
  • .survey-header - de balk bovenaan, met het binnenste vak .survey-header-content
    • .survey-progress - de voortgangsbalk
      • .survey-progress-bar - het gevulde deel ervan
  • .survey-main - de ruimte tussen de twee balken
    • .survey-content - de kolom met de hoofdinhoud
      • .survey-questions - de vragen op deze pagina
  • .survey-footer - de balk onderaan, met het binnenste vak .survey-footer-content
    • .survey-navigation - de navigatierij
      • .survey-navigation-back - Terug
      • .survey-navigation-step - “Stap 2 van 5”
      • .survey-navigation-next - Volgende
      • .survey-navigation-submit - Enquête versturen

Een enquête van één pagina heeft geen voortgangsbalk en het vragenscherm heeft alleen een knop Enquête versturen. Terug verschijnt vanaf de tweede pagina.

Vragen

Elke vraag is een .question, met daarin:

• .question-title - de vraagtekst
• .question-required - de * van een verplichte vraag, in de titel
• .question-description - de helptekst onder de vraag
• .question-answer - de antwoordinvoer
• .question-error - het bericht dat wordt getoond wanneer een antwoord ontbreekt of ongeldig is

Om één type vraag op te maken, voeg je de typeklasse toe, bijvoorbeeld .question-type-select-one .question-title:

• .question-type-string - vrije tekst
• .question-type-number - Getal
• .question-type-date - Datum
• .question-type-boolean - Ja of Nee
• .question-type-select-one - Selecteer één
• .question-type-select-many - Selecteer meerdere
• .question-type-ranking - Rangorde
• .question-type-interval-scale - Intervalschaal, zoals NPS
• .question-type-ordinal-scale - Ordinale schaal
• .question-type-matrix - Matrix
• .question-type-open-list - Open lijst
• .question-type-payment - Betaling

Lay-outinstellingen

.survey-shell bevat de keuzes uit de sectie Indeling als attributen, zodat je CSS deze kan volgen:

• data-navigation - flow wanneer de knoppen na de laatste vraag komen, sticky wanneer ze aan de onderkant van het scherm zijn vastgezet
• data-align - top of center, de positie van de inhoud

Op schermen smaller dan 640px zijn de telefooninstellingen van toepassing. Richt je hierop met data-phone-navigation en data-phone-align, zoals in het schaduwvoorbeeld hierboven.

Wat niet is toegestaan

Om respondenten te beschermen, kan een enquête niet worden opgeslagen met CSS die:

• @import, image-set() of src() gebruikt, of url() gebruikt zonder een data:-URL
• lettertypen toevoegt met @font-face. Kies in plaats daarvan een lettertype in de sectie Lettertypen
• selecteert op [value], [checked] of [selected], wat antwoorden zou kunnen onthullen
• ongeldige CSS of de reeks </ bevat
• langer is dan 50.000 tekens