SurveyMonkey
Formatieren Ihrer Umfrage mit CSS
Enterprise-Feature: Wenn Sie Interesse haben, kontaktieren Sie den Vertrieb. Wenn Sie bereits ein Enterprise-Konto haben, wenden Sie sich an Ihren Customer Success Manager.
Sie können ein benutzerdefiniertes Design erstellen, um globale Stiländerungen vorzunehmen. Verwenden Sie die Symbolleiste für die Textformatierung, um Stiländerungen nur für eine bestimmte Frage vorzunehmen.
Primäre Enterprise-Administratoren können CSS hinzufügen, um ein benutzerdefiniertes Umfragedesign zu erstellen und das Erscheinungsbild Ihrer Umfrage mit einem Branding zu versehen.
Erstellen eines benutzerdefinierten CSS-Designs
Primäre Administratoren können CSS hinzufügen, um ein benutzerdefiniertes Umfragedesign zu erhalten, das zu Ihren visuellen Ressourcen, Schriftarten, Farben und Stilpräferenzen passt.
So fügen Sie ein neues benutzerdefiniertes Design zur Bibliothek hinzu:
- Klicken Sie in der Hauptnavigation auf Mein Team und wählen Sie Bibliothek aus.
- Klicken Sie auf + Neues Objekt (Objekt hinzufügen).
- Wählen Sie das CSS-Design.
- Wählen Sie Code kopieren und fügen Sie ihn in Ihr bevorzugtes CSS-Bearbeitungstool.
- Nehmen Sie Anpassungen am Code vor und zeigen Sie dann eine Vorschau an, indem Sie ihn im Feld unter „Design anpassen“ einfügen und Vorschau generieren auswählen.
- Wählen Sie Speichern aus.
TIPP! Zeigen Sie eine Vorschau Ihres benutzerdefinierten CSS-Designs an, bevor Sie Ihre Umfrage versenden.
- Verwenden der Umfragevorschau zum Anzeigen Ihres benutzerdefinierten CSS-Designs
Aktualisieren eines benutzerdefinierten CSS-Designs
Sobald ein benutzerdefiniertes CSS-Design gespeichert wurde, kann nur der primäre Administrator die Seitenelemente bearbeiten oder ändern.
So bearbeiten Sie ein benutzerdefiniertes Design:
- Klicken Sie in der Hauptnavigation auf Mein Team und wählen Sie Bibliothek aus.
- Wählen Sie ... aus und klicken Sie auf Aktualisieren.
- Wählen Sie das CSS-Design.
- Wählen Sie Code kopieren und fügen Sie ihn in Ihr bevorzugtes CSS-Bearbeitungstool.
- Nehmen Sie Anpassungen am Code vor und zeigen Sie dann eine Vorschau an, indem Sie ihn im Feld unter „Design anpassen“ einfügen und Vorschau generieren auswählen.
- Wählen Sie Speichern aus.
Teammitglieder können einzelne Elemente einer Umfrage, auf die ein benutzerdefiniertes CSS-Design angewendet wurde, nicht ändern oder bearbeiten.
Anpassen von Seitenelementen
Allgemeine Eigenschaften
| CSS-Eigenschaft | String-Wert |
| Schriftfamilie | Ihre Organisation verfügt möglicherweise über eine bevorzugte Schriftfamilie. Weitere Ideen finden Sie unter CSS Web Safe Fonts. |
| Schriftgrad | Eine Zahl, z. B. 32 px |
| Farbe | Generieren Sie den RGBA-Wert Ihrer Farbe mit einer Farbauswahl. |
| Hintergrundfarbe | Ist entweder ein HEX-Code oder ein RGBA-Wert. |
Seitentitel
Den verschiedenen Seiten Ihrer Umfrage können Sie Seitentitel hinzufügen, damit die Umfrage klar und übersichtlich bleibt.
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
TIPP! Verwenden Sie eine Farbauswahl, um den RGBA-Wert oder Hexadezimalcode für Ihre Farbe zu generieren.
- Ändern des Schriftstils
- Ändern der Schriftbreite
- Ändern der Textauszeichnung
Umfragetitel
Der Umfragetitel wird oben auf jeder Umfrageseite angezeigt, wenn die Befragten daran teilnehmen, es sei denn, Sie blenden den Titel aus.
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- Ändern des Schriftstils
- Ändern der Schriftbreite
- Ändern der Textauszeichnung
Umfrageseite
Die Hintergrundfarbe, die im Hintergrund der Fragen in Ihrer Umfrage erscheint. Die Farbe für den Umfragehintergrund ist nur zu sehen, wenn Sie kein Hintergrundbild hinzugefügt haben.
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
TIPP! Generieren Sie den RGBA-Wert Ihrer Farbe mit einer Farbauswahl.
Fragetitel
Sie können die Darstellung des Fragetexts einer Vielzahl von Fragetypen anpassen.
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Ändern des Schriftstils
- Ändern der Schriftbreite
- Ändern der Textauszeichnung
Fragetext
Sie können festlegen, wie die Antwortoptionen für die Befragten dargestellt werden und welche Fragetypen bei Auswahl eine Hervorhebungsfarbe verwenden. Ein Beispiel hierfür ist eine Multiple-Choice-Frage.
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- Ändern des Schriftstils
- Ändern der Schriftbreite
- Ändern der Textauszeichnung
Schaltfläche
Personen, die an Ihrer Umfrage teilnehmen, verwenden diese Navigationsschaltflächen, um durch eine Umfrage zu blättern. Wenn ein Befragter auf der jeweiligen Seite der Umfrage auf die Schaltflächen „Weiter“ oder „Fertig“ klickt, werden die Beantwortungen gespeichert und übermittelt.
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- Ändern der Schriftbreite
Fehler
Den Befragten werden Fehlermeldungen angezeigt, wenn sie eine Pflichtfrage unbeantwortet lassen oder die Antwort nicht den Anforderungen entspricht.
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Ändern des Schriftstils
- Ändern der Schriftbreite
- Ändern der Textauszeichnung
Link „Beenden“
In der oberen rechten Ecke jeder Seite werden Links angezeigt, über die die Befragten die Umfrage beenden können, ohne die Beantwortungen der aktuellen Seite zu speichern.
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- Ändern der Schriftbreite
Seitenlayout
Sie können Layouts verwenden, um auszuwählen, wie und wo Ihre Hintergrundfarbe oder ein Bild angezeigt wird.
#pageLayout {
layout: banner;
opacity: 0.0;
}
TIPP! Legen Sie die Transparenz auf 100 fest, um eine einfarbige Hintergrundfarbe zu verwenden.