Layout im Style-Editor: Hintergründe, Rahmen und Abstände gestalten
Drei Tabs im Style-Editor steuern das visuelle Grundgerüst deines Formulars: Hintergründe, Rahmen und Elemente. Sie greifen direkt in das gerenderte Form-Layout ein und werden in der Vorschau in Echtzeit sichtbar.
Hintergründe
Im Tab Hintergründe wählst du zunächst einen von vier Typen aus:
- Einfarbig – einfarbige Hintergrundfläche.
- Verlauf – Farbverlauf aus zwei oder mehr Farben.
- Bild – Bild als Hintergrund (per URL oder Upload).
- Transparent – kein eigener Hintergrund (z. B. wenn das Formular in eine bestehende Seite eingebettet wird).
Bei Einfarbig öffnet ein Klick auf das Farbfeld einen Picker mit zwei Tabs: Palette (vordefinierte Farbskalen) und Benutzerdefiniert (Hex-Eingabe). Zusätzlich lässt sich die Deckkraft der Farbe über die Deckkraft steuern.
Bei Verlauf stehen acht vordefinierte Verläufe (z. B. Sonnenuntergang, Lila Liebe, Tiefer Weltraum, Royal, Ozeanblick) und acht Richtungen (oben, rechts, unten, links sowie die vier Diagonalen) zur Verfügung. Die einzelnen Farbstops kannst du nach Wunsch überschreiben.
Bei Bild wählst du zwischen URL (eine externe Bildadresse) und Hochladen. Per Upload akzeptiert Funnelforms JPEG, PNG, GIF und WEBP. Im Free-Tier liegt das Limit bei 10 MB pro Datei, in den kostenpflichtigen Tarifen bei bis zu 100 MB pro Datei. Vor dem Upload prüft das System dein verfügbares Speicherkontingent – ist es überschritten, schlägt der Upload bewusst fehl, bis du Dateien löschst oder deinen Plan erweiterst. Über den separaten Overlay-Regler legst du eine halbtransparente Farbschicht über das Bild, etwa um darüberliegende Texte lesbar zu halten.
Rahmen & Schatten
Im Tab Rahmen definierst du das Aussehen der Form-Karte:
- Eckenradius – 0 px bis 25 px.
- Rahmenbreite – 0 px bis 5 px.
- Rahmenstil – Linie, Gestrichelt, Gepunktet oder Keine.
- Auf Formular-Container anwenden – Schalter, der die Rahmen-Einstellungen zusätzlich auf die äußere Container-Fläche anwendet, statt nur auf einzelne Elemente.
Darunter liegt der Block Schatten für den Schlagschatten der Form-Karte:
- Schatten-Deckkraft – 0 % bis 100 %.
- Horizontaler Versatz (X) – −20 px bis +20 px.
- Vertikaler Versatz (Y) – −20 px bis +20 px.
- Unschärfe-Radius – 0 px bis 50 px.
- Ausbreitung – −20 px bis +20 px.
- Innerer Schatten – Schalter für einen Schatten innerhalb der Karte statt außen.
Ein eigener Vorschau-Block unterhalb der Slider zeigt das kombinierte Ergebnis aus Border und Shadow direkt im Editor, damit du Ringe und Tiefenwirkung beurteilen kannst, ohne in die Form-Vorschau wechseln zu müssen.
Elemente
Im Tab Elemente steuerst du Innenabstände, Optionsabstände und Icon-Größen:
- Antwort-Abstand – 4 px bis 32 px in 2-px-Schritten. Wirkt auf den Abstand zwischen Antwortoptionen und besitzt eine eigene Live-Vorschau mit vier Beispielkacheln.
- Formular-Container-Innenabstand – 8 px bis 64 px in 4-px-Schritten. Wirkt auf den Innenabstand der Form-Karte.
- Button-Innenabstand – 4 px bis 32 px in 2-px-Schritten. Wirkt auf den Innenabstand der Weiter-/Zurück-Buttons.
- Desktop-Symbolgröße – 50 % bis 200 % in 10-%-Schritten. Skaliert Icons in Single-Selection-Fragen auf dem Desktop.
- Mobile Symbolgröße – 50 % bis 200 % in 10-%-Schritten. Eigener Wert für Mobile; ist er nicht gesetzt, übernimmt das System den Desktop-Wert.
Anzeige-Optionen
Im selben Tab kannst du UI-Elemente gezielt ausblenden:
- Fortschrittsbalken ausblenden – versteckt die Fortschrittsleiste oberhalb der Frage.
- Prozent & Schritte ausblenden – versteckt die Prozent- und Schrittanzeige.
Animation
Über den Schalter Animation aktivieren aktivierst du die Übergangsanimation zwischen den Fragen. Ist sie eingeschaltet, erscheint ein Dropdown mit vier Varianten: Einblenden, Einblenden (von rechts), Zurücksliden (von rechts) und Hereinsliden (von rechts). Ist der Schalter aus, wird keine Animation angewendet und die Fragen wechseln ohne Animation.
Formular-Header
Der Block Formular-Kopfzeile erlaubt einen optionalen Header oberhalb der Fragen. Aktiviert er sich, blenden sich darunter alle Detail-Einstellungen ein:
- Kopfzeilen-Text – freier Text.
- Schriftgröße – 16 px bis 48 px in 2-px-Schritten.
- Textausrichtung – Links, Zentriert oder Rechts.
- Schriftstärke – Normal, Mittel oder Fett.
- Abstand unten – 8 px bis 64 px in 4-px-Schritten.
Was du beachten solltest
- Hintergrundbilder werden pro Nutzer in deinem Speicher abgelegt. Tauschst du ein Bild aus, wird das alte automatisch ersetzt.
- Wenn du das Formular einbettest, ist der Typ Transparent oft die bessere Wahl, weil dann die umgebende Seite den Hintergrund liefert.
- Sehr starke Schatten in Kombination mit großem Spread können auf Mobile am Rand abgeschnitten wirken – nutze in dem Fall die Vorschau zur Kontrolle.