Style-Editor: Formulare visuell an deine Marke anpassen
Der Style-Editor ist der Bereich im Formular-Editor, in dem du das visuelle Erscheinungsbild eines Formulars festlegst – Farben, Schriften, Abstände, Rahmen und Hintergründe. Dieser Artikel zeigt dir den Aufbau der Oberfläche, wie die einzelnen Tabs zusammenspielen und worauf du beim Speichern und Wechseln zwischen Geräten achten solltest.
Voraussetzungen
- Ein bestehendes Formular in deinem Funnelforms-Account.
- Schreibrechte auf das Formular (Eigentümer oder Teammitglied mit Bearbeitungsrechten).
- Eigene Schriften (Upload eigener Font-Dateien) sind Teil der kostenpflichtigen Pläne und werden für Free-Tier-Konten als gesperrt angezeigt.
Wo findest du den Style-Editor?
Öffne ein Formular im Funnelforms-Editor. UI-Pfad: Formular-Editor → Tab Style. Links siehst du das Konfigurations-Panel mit sechs Unter-Tabs, rechts die Live-Vorschau deines Formulars.
Funktionen im Überblick
- Sechs thematische Tabs: Vorlagen, Farben, Typografie, Abstände, Rahmen und Hintergründe.
- Live-Vorschau, die jede Änderung sofort darstellt.
- Geräte-Umschalter zwischen Desktop, Tablet und Mobile.
- Automatisches Speichern jeder Änderung im aktuellen Formular.
- Vordefinierte System-Themes und eigene wiederverwendbare Vorlagen.
Die sechs Stil-Tabs
- Vorlagen (intern: Themes): Vorgefertigte Komplett-Designs sowie deine eigenen gespeicherten Vorlagen. Ein Klick übernimmt Farben, Schriften, Abstände, Rahmen und Hintergründe in einem Rutsch.
- Farben: Einzelne Farben für Primär, Sekundär, Text, Überschriften, Akzent, Erfolg/Fehler/Warnung, Rahmen, Fortschrittsbalken sowie Buttons (Weiter-, Zurück- und Senden-Button getrennt einstellbar).
- Typografie: Schriftarten für Überschriften, Fließtext und Formularelemente, dazu Schriftgrößen, Zeilenhöhe und Schriftstärke. Google Fonts stehen direkt zur Verfügung; eigene Schriften können hochgeladen werden.
- Elemente (intern: spacing): Abstände zwischen Fragen, Eingabefeldern und Buttons sowie Container-Padding.
- Rahmen: Rahmenstil, Rahmenstärke, Eckenradius und Schatten für Eingabefelder, Buttons und Container.
- Hintergründe: Hintergrund des Formular-Containers und der umgebenden Seite (Farbe, Verlauf oder Bild).
Schritt-für-Schritt: Erste Konfiguration
- Öffne dein Formular und wechsle im oberen Tab-Menü auf Style.
- Beginne im Tab Vorlagen und wähle ein passendes System-Theme als Ausgangspunkt.
- Feintune im Tab Farben die Primär- und Button-Farben passend zu deiner Marke.
- Lege im Tab Typografie die Schriften für Überschriften und Fließtext fest.
- Passe in Elemente und Rahmen Abstände und Eckenradius an dein gewünschtes Look-and-Feel an.
- Prüfe die Live-Vorschau mit den Geräte-Umschaltern Desktop, Tablet, Mobile.
Wie funktioniert das Speichern?
Jede Änderung wird mit einer kurzen Verzögerung automatisch im aktuellen Formular gespeichert. Es gibt keinen manuellen Speichern-Button für Style-Änderungen – wer das Formular schließt, behält den letzten gespeicherten Zustand.
Was passiert beim Anwenden einer Vorlage?
Das gewählte Theme oder die eigene Vorlage ersetzt sämtliche aktuellen Style-Werte des Formulars. Du kannst anschließend in jedem Tab Werte überschreiben, ohne dass das die Vorlage selbst verändert.
Best Practices
- Starte mit einem System-Theme und passe nur die Farben an deine Marke an – das spart Zeit.
- Speichere ein gepflegtes Design als eigene Vorlage, sobald du es einmal hast – siehe Artikel „Style-Vorlagen nutzen".
- Prüfe vor dem Live-Schalten jedes Formular einmal in der Mobile-Vorschau, da Abstände und Schriftgrößen dort am ehesten kippen.
- Halte das Farb- und Schrift-Set bewusst klein – zwei Schriften und drei bis vier Farben reichen für ein konsistentes Bild.
Stolpersteine
- Eigener-Font-Upload als gesperrt markiert: Das Hochladen eigener Font-Dateien erfordert einen passenden kostenpflichtigen Tarif. Free-Tier-Konten können weiterhin die enthaltenen Google Fonts nutzen.
- Auto-Save scheint zu fehlen: Bei sehr instabiler Verbindung kann das Speichern fehlschlagen – warte nach der letzten Änderung kurz, bevor du den Browser schließt, damit das Auto-Save abschließen kann.
Tipp: Style-Einstellungen wirken nur auf das aktuell geöffnete Formular. Andere Formulare desselben Accounts bleiben unverändert.
Häufige Fragen
Wirken Style-Änderungen sofort live?
Ja. Sobald das Auto-Save erfolgreich war, sehen Besucher auf der Live-URL den neuen Style beim nächsten Aufruf.
Kann ich Style-Einstellungen zwischen Formularen kopieren?
Ja, über eigene Vorlagen – siehe Artikel „Style-Vorlagen nutzen". Es gibt keinen direkten „Style kopieren"-Button zwischen Formularen.
Kann ich CSS-Code direkt einfügen?
Nein. Der Style-Editor arbeitet mit strukturierten Werten, kein freies CSS. Wer fortgeschrittene Anpassungen braucht, kann das Formular in einer Embed-Umgebung mit eigenen Styles ergänzen.
Beeinflussen Style-Änderungen bereits eingegangene Antworten?
Nein. Antworten werden roh gespeichert und sind unabhängig vom visuellen Design.