Farben im Style-Editor: Formular-Design an deine Marke anpassen
Der Tab Farben im Style-Editor ist der zentrale Hebel, um ein Formular ans Branding deiner Marke anzupassen – von Primär- und Button-Farben über Texte bis hin zu Rahmen und Schatten. Dieser Artikel zeigt, welche Farben sich konfigurieren lassen, wie der Farb-Picker funktioniert und wie Themes als Schnellstart greifen.
Voraussetzungen
- Ein Formular in deinem Funnelforms-Account.
- Schreibrechte auf das Formular.
- Für die System-Vorlagen-Bibliothek ist ein passender Tarif erforderlich; der Tab Farben selbst ist für alle Pläne verfügbar.
Wo findest du die Farb-Einstellungen?
UI-Pfad: Formular-Editor → Tab Style → Tab Farben (Englisch: Colors). Für komplette Farb- und Style-Sets in einem Klick: Tab Vorlagen (Englisch: Themes).
Funktionen im Überblick
- Sieben Farb-Gruppen: Brand-Farben, Text-Farben, Fortschrittsbalken, Weiter-Button, Zurück-Button, Auswahl-Fragen, Rahmen & Schatten.
- Farb-Picker mit zwei Tabs: Palette (strukturierte Farbsets) und Custom (freier Hex-Wert).
- Brand-Palette mit den Funnelforms-Akzentfarben rund um die Akzentfarbe #6A30F5.
- Strukturierte Paletten nach Farbton: Grays, Reds, Oranges, Yellows, Greens, Teals, Blues, Indigos, Purples, Pinks.
- 10 vorgefertigte Themes (siehe Artikel „Style-Vorlagen nutzen").
Welche Farben kannst du konfigurieren?
- Brand-Farben: Primär- und Sekundärfarbe.
- Text-Farben: Fließtext, Überschriften, Beschreibungs-Text, Fortschrittsbalken-Text.
- Fortschrittsbalken: gefüllte Farbe und Hintergrund-Farbe.
- Weiter-Button: Hintergrund und Text-Farbe.
- Zurück-Button: Hintergrund und Text-Farbe (getrennt vom Weiter-Button einstellbar).
- Auswahl-Fragen: Icon-Farbe und Hintergrund-Farbe (z. B. für Radio-/Checkbox-Karten).
- Rahmen & Schatten: Rahmenfarbe und – falls Schatten aktiv – Schatten-Farbe.
Schritt-für-Schritt: Einzelne Farbe ändern
- Öffne dein Formular und wechsle in Style → Farben.
- Klicke auf die farbige Vorschau-Fläche neben dem gewünschten Eintrag.
- Wähle im Tab Palette eine Voreinstellung oder wechsle in den Tab Custom für einen freien Hex-Wert (z. B.
#1A1A2E). - Die Live-Vorschau auf der rechten Seite zeigt die Änderung sofort.
- Es gibt keinen Speichern-Button – die Änderung wird automatisch im aktuellen Formular gespeichert.
Schritt-für-Schritt: Theme als Schnellstart
- Wechsle in Style → Vorlagen.
- Klicke auf ein passendes System-Theme – z. B. Modern Purple, Ocean Blue, Sunset Orange.
- Das Theme überträgt Farben, Schriften, Abstände, Rahmen und Hintergründe in einem Rutsch.
- Feintune einzelne Farben anschließend im Tab Farben.
Wie funktioniert der Farb-Picker?
Der Picker öffnet sich als Popover und bietet zwei Tabs:
- Palette: Schnellzugriff auf Brand-Farben, eine 10-stufige Grau-Skala und kuratierte Farbpaletten je Farbton (jeweils zehn Helligkeitsstufen). Ein Klick übernimmt den Wert direkt.
- Custom: Eingabe-Feld für beliebige Hex-Werte. Die Eingabe wird live übernommen.
Best Practices
- Setze 1–2 starke Akzentfarben gezielt ein (z. B. für den Weiter-Button), statt jede Komponente einzufärben.
- Achte auf Kontrast zwischen Text und Hintergrund (Richtwert WCAG AA).
- Halte Primärfarbe, Weiter-Button-Hintergrund und Fortschrittsbalken-Füllung farblich konsistent.
- Speichere eine fertige Kombination als eigene Vorlage – siehe Artikel „Style-Vorlagen nutzen".
Stolpersteine
- Theme überschreibt eigene Farben: Beim Anwenden eines Themes werden alle aktuellen Farb-Werte ersetzt. Eigene Anpassungen vorher als Vorlage sichern.
- Picker-Eingabe scheint nicht zu greifen: Im Custom-Tab muss ein gültiger Hex-Wert (mit oder ohne „#") stehen. Ungültige Werte werden ignoriert.
- Zurück-Button bleibt unverändert: Weiter- und Zurück-Button sind getrennte Farb-Sets. Wer beide synchron will, muss beide manuell setzen.
- Schatten-Farbe ohne Wirkung: Sie greift nur, wenn der Schatten unter Rahmen aktiviert ist.
Tipp: Die Brand-Palette enthält die offiziellen Funnelforms-Lila-Töne. Für ein eigenes Branding nutzt du den Custom-Tab mit Hex-Werten aus deinem Design-System.
Häufige Fragen
Wirken Farb-Änderungen sofort auf der Live-URL?
Ja. Sobald das Auto-Save erfolgreich war, sehen Besucher beim nächsten Aufruf die neuen Farben.
Kann ich Farben pro Formular getrennt setzen?
Ja. Jede Farb-Konfiguration gehört zu genau einem Formular. Andere Formulare desselben Accounts bleiben unberührt.
Was passiert, wenn ich ein Theme wechsle?
Das neue Theme überschreibt alle aktuellen Farb-, Schrift-, Abstands-, Rahmen- und Hintergrund-Einstellungen. Sichere vorherige Anpassungen vorab als eigene Vorlage.
Gibt es Farbverläufe für Buttons?
Für Buttons werden im Tab Farben Volltonfarben gesetzt. Farbverläufe können unter Hintergründe für Container- bzw. Seiten-Hintergrund verwendet werden.