Formular-Design anpassen und sauber prüfen
Die Sidebar Stil im Formular-Editor steuert das gesamte visuelle Erscheinungsbild deines Formulars: Farben, Typografie, Abstände, Rundungen, Buttons und Fortschrittsanzeige. Dieser Artikel zeigt, wo du den Stil findest, welche Einstellungen verfügbar sind, wie du Änderungen Schritt für Schritt überprüfst und welche Stolpersteine du vermeiden solltest, damit dein Formular im Embed exakt so aussieht wie in der Vorschau.
Voraussetzungen
- Ein geöffnetes Formular im Editor
- Deine Markenfarben als HEX-Werte (z. B. #6A30F5)
- Optional: ein Hintergrundbild mit ausreichender Auflösung für Desktop und Mobile
Wo finde ich die Stil-Einstellungen?
Öffne ein Formular im Editor und wechsle in der linken Sidebar auf Stil. Alle Änderungen werden in der Live-Vorschau rechts sofort sichtbar — sowohl in der Desktop- als auch in der Mobile-Ansicht. Formular-Versionen werden im Tab Verlauf abgelegt.
Verfügbare Einstellungen
- Primärfarbe — wird für Buttons, Fokus-Rahmen, Auswahlzustände und Akzente verwendet.
- Hintergrund — Volltonfarbe, Verlauf oder Bild; gilt für die gesamte Formular-Bühne.
- Typografie — Schriftfamilie, Basisgröße und Schriftgewicht.
- Rundungen — von scharfen Kanten bis vollständig runden Ecken für Inputs, Karten und Buttons.
- Abstände — kompakt, Standard oder komfortabel; wirkt auf Padding, Zeilenhöhen und Karten-Abstände.
- Buttons — gefüllt oder Outline, Beschriftung pro Schritt anpassbar (z. B. „Weiter", „Absenden").
- Fortschrittsanzeige — Balken, Punkte oder ausgeblendet, je nach Funnel-Länge.
Schritt für Schritt: Stil aufbauen
- Öffne Stil in der Sidebar und beginne mit der Primärfarbe — sie definiert den Markencharakter.
- Setze den Hintergrund: Volltonfarbe für klare SaaS-Funnels, Verlauf für Marketing-Landingpages, Bild für emotionale Brands.
- Wähle eine Schriftfamilie aus der Bibliothek. Halte dich an maximal eine Schrift pro Formular, um Konsistenz zu wahren.
- Justiere Rundungen und Abstände auf den Stil deiner Website (z. B. starke Rundungen passen zu modernen SaaS-Marken).
- Passe die Button-Variante und die Beschriftung pro Schritt an, falls du den Tonfall variieren möchtest.
- Aktiviere oder deaktiviere die Fortschrittsanzeige, je nachdem, wie viele Schritte das Formular hat.
- Prüfe die Live-Vorschau in Desktop und Mobile und speichere.
Best Practices
- Verwende exakt die HEX-Werte aus deinem Markenleitfaden — das verhindert Drift zwischen Website und Formular.
- Halte den Kontrast zwischen Primärfarbe und Hintergrund über dem WCAG-Mindestwert für lesbaren Text.
- Teste den Stil immer im echten Embed, nicht nur in der Editor-Vorschau.
- Verwende kompakte Abstände nur bei kurzen Formularen — bei langen Funnels reduziert Komfort die Absprungrate.
Stolpersteine
- Kontrast zu gering: Primärfarbe auf Hintergrund muss lesbar bleiben. Prüfe den Kontrast bewusst, eine automatische Warnung gibt es nicht.
- Embed sieht anders aus als die Vorschau: Host-CSS kann Styles überschreiben — verwende das von Funnelforms generierte Embed-Snippet unverändert.
- Hintergrundbild wirkt unscharf: Quelle in ausreichender Auflösung und passendem Format wählen; bei großen Dateien Ladezeit prüfen.
Tipps
Definiere den Stil einmal sauber zu Beginn und nutze ihn als Vorlage für alle weiteren Formulare — das spart Zeit und sichert ein konsistentes Markenerlebnis über alle Funnels hinweg.
FAQ
Kann ich eigenes CSS einbinden? Nein. Embeds sind bewusst isoliert, um Konflikte mit Host-CSS zu vermeiden.
Werden Stil-Änderungen versioniert? Formular-Versionen werden im Tab Verlauf abgelegt; eine Wiederherstellung erfolgt auf Formular-Ebene.
Können verschiedene Formulare unterschiedliche Stile haben? Ja. Der Stil ist pro Formular und unabhängig von anderen Formularen im Account.
Funktioniert Dark Mode? Das Formular orientiert sich am konfigurierten Hintergrund — Nutzer sehen den definierten Stil, nicht ihre OS-Einstellung.