Überblick
NueForm bietet umfangreiche Theming-Möglichkeiten, mit denen du deine Formulare an deine Marke anpasst. Jeder visuelle Aspekt eines Formulars lässt sich anpassen — von Farben und Schriftarten bis hin zu Logos und eigenem CSS.
Theme-Eigenschaften
Theme-Eigenschaften werden auf Formularebene festgelegt und gelten für jede Frage im Formular. Beim Rendern werden sie in CSS Custom Properties (Variablen) umgewandelt, sodass sich alle Komponenten automatisch anpassen.
Farbeigenschaften
| Eigenschaft | CSS-Variable | Beschreibung | Standard |
|---|---|---|---|
| Hintergrundfarbe | --fc-bg | Die Hintergrundfarbe des gesamten Formulars. | #0a0a0a |
| Textfarbe | --fc-text | Die primäre Textfarbe für Fragen und Inhalte. | #e8e8e8 |
| Theme-Farbe (Akzent) | --fc-accent | Die Akzentfarbe für Hervorhebungen, aktive Zustände und Fragennummern. | #6366f1 |
| Antwort-Textfarbe | --fc-answer-text | Die Farbe des vom Teilnehmer in Eingabefelder getippten Textes. | #e8e8e8 |
| Platzhalterfarbe | --fc-placeholder | Die Farbe des Platzhaltertextes in Eingabefeldern. | rgba(255,255,255,0.25) |
| Schaltflächenfarbe | --fc-btn-bg | Die Hintergrundfarbe primärer Schaltflächen (OK, Start, Absenden). Fällt auf die Theme-Farbe zurück, wenn nicht gesetzt. | #6366f1 |
| Schaltflächen-Textfarbe | --fc-btn-text | Die Textfarbe primärer Schaltflächen. | #ffffff |
| Titelfarbe | --fc-title-color | Die Farbe der Frage-/Aktivitätstitel. Fällt auf die Textfarbe zurück. | Erbt Textfarbe |
| Beschreibungsfarbe | --fc-description-color | Die Farbe der Frage-/Aktivitätsbeschreibungen. | Textfarbe mit 55 % Deckkraft |
| Options-Textfarbe | --fc-option-color | Die Farbe der Auswahloptions-Beschriftungen und Aktivitätsinhalte. | Erbt Textfarbe |
| Indikator-Hintergrundfarbe | --fc-indicator-bg | Hintergrundfarbe der Aktivitätsindikatoren in Fuse-Aktivitäten. | Akzent mit 15 % Deckkraft |
| Indikator-Textfarbe | --fc-indicator-text | Textfarbe der Aktivitätsindikatoren. | Akzentfarbe |
Abgeleitete Farbvariablen
Das Theme-System generiert aus deinen Grundfarben automatisch zusätzliche CSS-Variablen für verschiedene Komponentenzustände:
| CSS-Variable | Beschreibung |
|---|---|
--fc-accent-hover | Aufgehellte Akzentfarbe für Hover-Zustände. |
--fc-accent-8 bis --fc-accent-60 | Akzentfarbe in verschiedenen Deckkraftstufen (8 %, 10 %, 15 %, 20 %, 30 %, 40 %, 60 %). |
--fc-text-2 bis --fc-text-85 | Textfarbe in verschiedenen Deckkraftstufen (2 %, 4 %, 5 %, 6 %, 8 %, 10 %, 12 %, 15 %, 20 %, 40 %, 55 %, 75 %, 80 %, 85 %). |
--fc-input-bg | Eingabe-Hintergrund (Textfarbe mit 5 % Deckkraft). |
--fc-card-bg | Karten-Hintergrund (Textfarbe mit 4 % Deckkraft). |
--fc-border | Rahmenfarbe (Textfarbe mit 12 % Deckkraft). |
--fc-muted | Gedämpfter/sekundärer Text (Textfarbe mit 45 % Deckkraft). |
--fc-primary | Primärfarbe (Alias für Akzent). |
--fc-btn-bg-hover | Aufgehellter Schaltflächen-Hintergrund für Hover-Zustände. |
Schrifteigenschaften
NueForm lädt Schriftarten automatisch von Google Fonts. Jede Google-Fonts-Schriftfamilie kann verwendet werden.
| Eigenschaft | CSS-Variable | Beschreibung | Standard |
|---|---|---|---|
| Frageschrift | --fc-font-question | Schriftfamilie für Fragetitel. | Inter |
| Antwortschrift | --fc-font-answer | Schriftfamilie für den Eingabetext der Teilnehmer. | Inter |
| Schaltflächenschrift | --fc-font-button | Schriftfamilie für Schaltflächenbeschriftungen. | Inter |
| Beschreibungsschrift | --fc-font-description | Schriftfamilie für Frage-/Aktivitätsbeschreibungen. | Erbt Frageschrift |
| Optionsschrift | --fc-font-option | Schriftfamilie für Auswahloptions-Beschriftungen und Aktivitätsinhalte. | Erbt Antwortschrift |
| Indikatorschrift | --fc-font-indicator | Schriftfamilie für den Text der Aktivitätsindikatoren. | Erbt Frageschrift |
| Frage-Schriftgröße | --fc-font-size-question | Die Schriftgröße für Fragetitel. Akzeptiert jeden CSS-Größenwert (rem, px usw.). | 1.875rem (30px) |
Schriftarten werden bei Bedarf von Google Fonts geladen. Das System generiert automatisch die korrekte Google-Fonts-CSS-Import-URL und fordert für jede Schriftfamilie die Schriftschnitte 300 bis 700 an. Die Standardschrift Inter ist vorgeladen und benötigt keine Google-Fonts-Anfrage.
Branding
Logo
Du kannst deinen Formularen an zwei Positionen ein Logo hinzufügen:
Oberes Logo:
| Einstellung | Beschreibung | Standard |
|---|---|---|
| URL des oberen Logos | URL des Logobildes, das oben im Formular angezeigt wird. | Keine |
| Größe des oberen Logos | Größe des oberen Logos: small, medium oder large. | medium |
| Ausrichtung des oberen Logos | Horizontale Ausrichtung: left, center oder right. | center |
| CSS des oberen Logos | Eigenes CSS für den Container des oberen Logos (.fc-top-logo). | Keine |
Branding-Logo:
| Einstellung | Beschreibung | Standard |
|---|---|---|
| URL des Branding-Logos | URL des Branding-Logos, typischerweise im Footer- oder Wasserzeichenbereich angezeigt. | Keine |
Footer-Text
| Einstellung | Beschreibung | Standard |
|---|---|---|
| Branding-Footer-Text | Eigener Text, der im Footer-Bereich des Formulars angezeigt wird. | Keine |
Wasserzeichen-CSS
| Einstellung | Beschreibung | Standard |
|---|---|---|
| Wasserzeichen-CSS | Eigenes CSS für das Wasserzeichen-/Logo-Element unten links (.fc-watermark). | Keine |
Branding ausblenden (Pro+)
| Einstellung | Beschreibung | Standard |
|---|---|---|
| Branding ausblenden | Entfernt das NueForm-Branding aus dem Formular. Erfordert einen Pro+-Plan. | Deaktiviert |
Das Ausblenden des NueForm-Brandings ist eine Pro+-Funktion. In kostenlosen und niedrigeren Plänen wird das NueForm-Wasserzeichen immer angezeigt.
Branding-Standards
Mit Branding-Standards auf Kontoebene legst du Standard-Theme-Werte fest, die für alle neuen Formulare gelten, die du erstellst. Sie können auf Formularebene überschrieben werden.
Verfügbare Branding-Standards:
- Logo-URL
- Footer-Text
- Theme-Farbe
- Hintergrundfarbe
- Textfarbe
- Antwort-Textfarbe
- Platzhalterfarbe
- Schaltflächenfarbe
- Schaltflächen-Textfarbe
- Schriftfamilie (Frage)
- Schriftfamilie (Antwort)
- Schriftfamilie (Schaltfläche)
- Frage-Schriftgröße
- URL, Größe, Ausrichtung und CSS des oberen Logos
- Wasserzeichen-CSS
Übergänge auf Frageebene
Jede Frage kann ihre eigene Übergangsanimation haben, oder du wendest denselben Übergang auf alle Fragen an. Verfügbare Übergänge:
| Übergang | Beschreibung |
|---|---|
| Vertikales Gleiten + Ausblenden | Fragen gleiten mit einem Fade-Effekt nach oben/unten. Das ist der Standard. |
| Horizontales Gleiten | Fragen gleiten nach links/rechts. |
| Diagonales Gleiten | Fragen gleiten diagonal. |
| Elastisches Federn | Fragen federn mit elastischem Überschwingen herein. |
| Durchzoomen | Fragen zoomen durch den Viewport herein/heraus. |
| Hineindrehen | Fragen drehen sich beim Erscheinen leicht. |
Du kannst den Übergang für einzelne Fragen im Frage-Editor festlegen oder mit der Option „Auf alle Fragen anwenden" einen einheitlichen Übergang setzen.
Eigenes CSS
Für die vollständige Kontrolle über das Erscheinungsbild deines Formulars kannst du eigenes CSS schreiben. Die vollständige Liste der verfügbaren Selektoren und CSS-Variablen findest du in der Anleitung zu Eigenem CSS.
Styling pro Frage
Einzelne Fragen unterstützen diese Styling-Optionen:
| Eigenschaft | Beschreibung |
|---|---|
| Eigener Klassenname | Füge dem Fragecontainer eine CSS-Klasse hinzu. Nutze das in Kombination mit eigenem CSS, um bestimmte Fragen unterschiedlich zu stylen. |
| Fragennummer ausblenden | Entfernt das Fragennummer-Präfix bei dieser spezifischen Frage. |
| Eigener Klassenname für Medien | Füge dem an diese Frage angehängten Medienelement eine CSS-Klasse hinzu. |
Theme für helle vs. dunkle Hintergründe
Das Standard-Theme von NueForm verwendet einen dunklen Hintergrund (#0a0a0a) mit hellem Text (#e8e8e8). Die abgeleiteten CSS-Variablen (Rahmen, Eingaben, Karten) werden alle relativ zur Textfarbe berechnet, daher ist der Wechsel zu einem hellen Theme unkompliziert:
- Setze die Hintergrundfarbe auf eine helle Farbe (z. B.
#ffffff). - Setze die Textfarbe auf eine dunkle Farbe (z. B.
#1a1a1a). - Die abgeleiteten Variablen (
--fc-border,--fc-input-bg,--fc-card-bg,--fc-muted) passen sich automatisch an, weil sie auf Deckkraftvarianten der Textfarbe basieren.
Achte beim Wechsel zwischen hellem und dunklem Theme darauf, auch Platzhalterfarbe, Antwort-Textfarbe und Schaltflächenfarbe anzupassen, um Lesbarkeit und Kontrast zu erhalten.