Passe deinen Umfragestil an

Aktualisiert 1. Oktober 2026

Ein Stil legt die Schriftarten, Farben und das Layout deiner Umfrage fest. Füge CSS für Details hinzu, die der Stileditor nicht abdeckt. Dein CSS erscheint in der Vorschau, auf dem öffentlichen Umfragelink und in Umfragen, die auf deiner Website eingebettet sind.

Wo du dein CSS hinzufügst

Öffne die Umfrage, gehe zu Erstellen → Vorschau und öffne Erweitert im Stilbereich. Setze ein Häkchen bei Ich weiß, was ich tue, um den CSS-Editor anzuzeigen. Die Vorschau zeigt deine Änderungen während der Eingabe an. Wenn du den Stil bearbeitest, wird eine Kopie für diese Umfrage namens Mein eigener Stil erstellt. Speichere die Umfrage, um deine Änderungen zu veröffentlichen.

Um den Stil in anderen Umfragen zu verwenden, wähle Als Arbeitsbereichsstil speichern.

Beispiele

Jedes Beispiel funktioniert für sich allein. Kombiniere die, die du brauchst.

Verwende für Farben Palettenvariablen wie var(--primary), var(--foreground) oder var(--muted-foreground). Sie werden aktualisiert, wenn du die Palette änderst, einschließlich ihrer hellen und dunklen Varianten.

Fragetext in deiner Markenfarbe

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

Größerer Fragetext

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

Größere Buttons bei Bewertungsskalen

Für NPS und andere numerische Bewertungsskalen, die Buttons verwenden:

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

Dickerer Fortschrittsbalken

.survey-progress {
    height: 6px;
}

Schrittzähler ausblenden

Entfernt “Schritt 2 von 5” zwischen den Buttons:

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

Runde Navigations-Buttons

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

Schmalere Spalten für Fragen und Navigation

Lege beide Breiten fest, damit die Navigation auf einer Linie mit den Fragen bleibt:

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

Schatten über angehefteter Navigation

Verwende die Desktop- und Smartphone-Einstellungen separat. Jede kann die Navigation am unteren Bildschirmrand anheften:

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

Umfrage-Überschriften

Dies färbt jedes h1 und h2 auf der Umfrageseite ein, einschließlich Textblöcken und dem Titel der Abschlussseite:

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

Seitenstruktur

Verwende die unten stehenden Klassennamen in deinem CSS. Wir halten sie zwischen den Versionen stabil. Andere Klassennamen auf der Seite sind intern und können ohne Vorankündigung geändert werden.

Umfrageseiten teilen diese Struktur. Fortschritt, Fragen und Navigation erscheinen nur auf den Bildschirmen, die sie benötigen:

  • .survey-shell - die gesamte Seite
    • .survey-header - die Leiste oben, mit der inneren Box .survey-header-content
      • .survey-progress - die Fortschrittsanzeige
        • .survey-progress-bar - ihr ausgefüllter Teil
    • .survey-main - der Platz zwischen den beiden Leisten
      • .survey-content - die Hauptinhaltsspalte
        • .survey-questions - die Fragen auf dieser Seite
    • .survey-footer - die Leiste unten, mit der inneren Box .survey-footer-content
      • .survey-navigation - die Navigationszeile
        • .survey-navigation-back - Zurück
        • .survey-navigation-step - “Schritt 2 von 5”
        • .survey-navigation-next - Weiter
        • .survey-navigation-submit - Umfrage absenden

Eine einseitige Umfrage hat keinen Fortschrittsbalken und ihr Fragenbildschirm hat nur einen “Umfrage absenden”-Button. “Zurück” erscheint ab der zweiten Seite.

Fragen

Jede Frage ist eine .question, die Folgendes enthält:

  • .question-title - der Fragetext
  • .question-required - das * einer Pflichtfrage, innerhalb des Titels
  • .question-description - der Hilfetext unter der Frage
  • .question-answer - die Antwort-Eingabe
  • .question-error - die Nachricht, die angezeigt wird, wenn eine Antwort fehlt oder ungültig ist

Um einen Fragetyp zu gestalten, füge seine Typ-Klasse hinzu, zum Beispiel .question-type-select-one .question-title:

  • .question-type-string - Text
  • .question-type-number - Zahl
  • .question-type-date - Datum
  • .question-type-boolean - Ja oder Nein
  • .question-type-select-one - Einfachauswahl
  • .question-type-select-many - Mehrfachauswahl
  • .question-type-ranking - Rangfolge
  • .question-type-interval-scale - Intervallskala (numerische Bewertungsskala, wie NPS)
  • .question-type-ordinal-scale - Ordinalskala
  • .question-type-matrix - Matrix
  • .question-type-open-list - Offene Liste
  • .question-type-payment - Zahlung

Layout-Einstellungen

.survey-shell trägt die Auswahlmöglichkeiten aus dem Abschnitt Layout als Attribute, sodass dein CSS ihnen folgen kann:

  • data-navigation - flow, wenn die Buttons der letzten Frage folgen, sticky, wenn sie am unteren Bildschirmrand angeheftet sind
  • data-align - top oder center, die Position des Inhalts

Auf Bildschirmen, die schmaler als 640px sind, gelten die Smartphone-Einstellungen. Sprich sie mit data-phone-navigation und data-phone-align an, wie im Schatten-Beispiel oben.

Was nicht erlaubt ist

Um die Befragten zu schützen, kann eine Umfrage nicht mit CSS gespeichert werden, das:

  • @import, image-set() oder src() verwendet, oder url() ohne eine data:-URL nutzt
  • Schriftarten mit @font-face hinzufügt. Wähle stattdessen eine Schriftart im Abschnitt Schriftarten
  • auf [value], [checked] oder [selected] zugreift, was Antworten preisgeben könnte
  • ungültiges CSS oder die Zeichenfolge </ enthält
  • länger als 50.000 Zeichen ist