Design anpassen

Im Arbeitsbereich Design gibst du deinem Formular das Aussehen deiner Marke: Farben, Schrift, Ecken, Hintergrund und mehr. Eine Live-Vorschau zeigt jede Änderung sofort. Der Artikel ist für alle, die das Formular an ihre Website anpassen wollen.

Voraussetzungen

Du brauchst das Recht, Formulare zu bearbeiten.
Themes, Farben, Schriften (auch hochgeladene und Google Fonts), Hintergrund und Übergänge gibt es in Funnelforms Free und Funnelforms Pro.
Deine Stile, Von einer Website übernehmen und Eigenes CSS sind nur Pro.
Eigenes CSS lässt sich nur veröffentlichen, wenn dein WordPress-Benutzer das Recht für ungefiltertes HTML hat.

Wo finde ich die Funktion?

Funnelforms → Formulare → Formular öffnen → Design (oben in der Leiste). Links stehen die Einstellungen, rechts die Live-Vorschau.

Funktionen im Überblick

Zwölf Themes als Startpunkt: Funnelforms, Wie die Website, Business, Dunkel, Lavendel, Grün, Orange, Elegant, Pink, Tech, Rot und Pastell
Deine Stile (nur Pro): eigene Designs speichern und auf andere Formulare anwenden
Von einer Website übernehmen (nur Pro): Farben und Schrift einer Website übernehmen
Farben für Akzent, Text, Hintergrund und Rahmen, dazu Weitere Farben
Schriften: mitgelieferte, eigene Dateien und Google Fonts
Größen, Abstände, Rahmen, Schatten, Hintergrund (Verlauf oder Bild) und Übergänge
Eigenes CSS (nur Pro)
Hinweis Schwer lesbar bei zu geringem Kontrast

Schritt-für-Schritt-Anleitung

Theme und Farben wählen

Öffne den Arbeitsbereich Design.
Klicke bei Theme auf ein Theme. Es ersetzt Farben, Schrift und Ecken des Formulars, und die Vorschau rechts aktualisiert sich. Das Theme Wie die Website übernimmt Schrift und Textfarbe deiner Website und hat keinen eigenen Hintergrund.
Ändere bei Bedarf Akzentfarbe, Text, Hintergrund und Rahmen. Darunter steht dann „Basiert auf … mit deinen Änderungen“.
Öffne Weitere Farben, um Fragen, Hinweise, Buttons, Antworten, Icons und den Fortschrittsbalken einzeln zu färben. Leere Felder folgen den Farben oben.

Farben und Schrift von deiner Website übernehmen (nur Pro)

Klicke auf Von einer Website übernehmen.
Gib die Adresse der Website ein. Fehlt das „https://“, ergänzt der Editor es.
Setze das Häkchen bei „Das ist meine Website, oder ich darf ihre Farben und Schriften verwenden.“
Klicke auf Farben und Schrift laden.
Wähle für Akzentfarbe, Text und Hintergrund eine gefundene Farbe oder Beibehalten. Wähle bei Schrift eine gefundene Schrift oder Aktuelle Schrift beibehalten.
Prüfe die kleine Vorschau und klicke auf Anwenden.

Schrift ändern

Wähle bei Schrift eine Schrift aus der Liste, zum Beispiel Schrift der Website, Montserrat, Poppins oder Systemschrift.
Für eine eigene Schrift klicke auf Schrift hochladen und wähle eine Datei (ttf, otf, woff oder woff2).
Für eine Google-Schrift klicke auf Google Fonts, suche den Namen oder filtere nach Stil und klicke die Schrift an. Sie wird einmal auf deine Website geladen und erscheint danach in der Liste.
Unter Schriften und Größen wählst du getrennte Schriften für Fragen und Überschriften sowie Antworten und Eingaben, die Schriftgrößen (auch für Smartphones) und die Zeilenhöhe.

Stil speichern und wiederverwenden (nur Pro)

Klicke auf Als Stil speichern.
Gib einen Namen des Stils ein und klicke auf Stil speichern.
In anderen Formularen findest du ihn unter Deine Stile. Ein Klick wendet ihn an, das Kreuz löscht ihn (Stil … löschen).

Hintergrund einstellen

Öffne den Abschnitt Hintergrund.
Schalte Hintergrund als Verlauf ein, wähle einen der Verläufe oder stelle Zweite Hintergrundfarbe und Richtung ein.
Wähle mit Bild wählen ein Hintergrundbild aus der Mediathek. Dann kannst du Farbe über dem Bild, Bildgröße (Formular füllen, Ganzes Bild zeigen, Originalgröße) und Bildposition einstellen.

Erklärungen

Wie sehen Besucher das Formular?

Das Formular steht auf einer Karte. Die untere Leiste enthält Zurück, den Fortschritt mit „Schritt … von …“ und Weiter; ist einer der Buttons ausgeblendet, nimmt der Fortschritt seinen Platz ein. Stehen die Buttons zusammen, etwa bei Volle Breite, rückt der Fortschritt über sie.
Hat das Formular einen deckenden Hintergrund, bleibt die untere Leiste auf Smartphones am unteren Bildschirmrand stehen.
Ein Schrittwechsel gleitet in die Richtung, in die Besucher gehen.
Auf dunklen Formularen zeichnet der Browser eigene Bedienelemente wie Datumsauswahl und Kästchen ebenfalls dunkel.
Rahmen von Eingabefeldern und Antwortkacheln erreichen mindestens einen Kontrast von 3:1 zum Hintergrund. Funnelforms leitet die Rahmenfarbe dafür aus deiner Farbe Rahmen ab und mischt sie nur so weit wie nötig zur Textfarbe hin.
Pflichtfelder tragen einen roten Stern, auch im Kontaktschritt. Beim ersten Schritt mit einem Pflichtfeld steht einmal „Mit * markierte Felder sind Pflichtfelder.“

Was ändert sich in den übrigen Abschnitten?

Ecken rundet die Karte und, davon abgeleitet, die Eingabefelder. Ecken der Buttons rundet Buttons einzeln.
Abstände und Größen: Abstand zwischen Antworten, Innenabstand, Höhe der Buttons, Größe von Icons und Bildern in Antworten.
Rahmen und Schatten: Rahmenstärke, Rahmenart (Durchgezogen, Gestrichelt, Gepunktet, Keiner), ein Rahmen um das ganze Formular und der Schatten (Weich, Mittel, Kräftig oder Eigener).
Ausrichtung, Fortschritt und Übergang: Ausrichtung der Fragen, Anordnung der Buttons (zum Beispiel Zurück links, Weiter rechts oder Volle Breite), Fortschrittsbalken mit Prozentzahl und Übergang zwischen Schritten (zum Beispiel Einblenden oder Von unten auftauchen). Wer Animationen auf dem Gerät ausgeschaltet hat, sieht keinen Übergang.

Warum erscheint „Schwer lesbar“?

Der Editor prüft das Verhältnis von Text- und Hintergrundfarbe, etwa bei Buttons, Fragen und Hinweisen. Liegt es unter 4,5:1, nennt er die betroffene Stelle. Ziel sind mindestens 4,5:1, damit alle das Formular lesen können.

Woher kommen die Schriften, und was sehen Besucher?

Schriften liegen auf deiner Website. Besucher laden nichts von fremden Servern. Eine Google-Schrift lädt der Server deiner Website einmal von Google herunter, wenn du sie wählst; Besucher laden sie danach von deiner Website und nichts von Google. Prüfe, ob die Lizenz einer hochgeladenen Schrift die Nutzung auf Websites erlaubt. Hochgeladene Schriftdateien dürfen höchstens 2 MB groß sein.

Was passiert beim Übernehmen von einer Website?

Deine Website lädt die angegebene Seite und ihre Stylesheets einmal und liest daraus Farben und Schriften. Nichts wird gespeichert, und es werden keine Daten über dich oder deine Besucher gesendet. Es sind höchstens 30 Importe pro Benutzer und Stunde möglich. Eine gefundene Google-Schrift wird beim Anwenden auf deine Website geladen; eine andere Schrift, die deine Website nicht hostet, sehen Besucher nur auf Seiten, die sie laden. Lade in dem Fall die Schriftdatei hoch.

Was ist eigenes CSS? (nur Pro)

Unter Eigenes CSS gibst du CSS für das Formular ein. Es gilt für die ganze Seite; beginne Selektoren mit dem im Hinweis genannten Attribut, damit nur dieses Formular betroffen ist. Zum Veröffentlichen braucht dein Benutzer das Recht für ungefiltertes HTML. Beim Speichern als Stil bleibt das CSS beim Formular.

Was ist in Funnelforms Free anders?

In Free fehlen im Arbeitsbereich Design der Bereich Deine Stile mit Als Stil speichern, die Schaltfläche Von einer Website übernehmen und der Abschnitt Eigenes CSS. Hat ein Formular schon eigenes CSS, etwa aus einem Import oder aus Pro, erscheint der Abschnitt, damit du das CSS entfernen kannst. Solange es bleibt, lässt sich das Formular in Free nicht veröffentlichen. Ist ein solches Formular schon veröffentlicht, zeigt Free es ohne das eigene CSS, also nur im Design seines Themes. Alles andere in diesem Artikel, auch Schrift hochladen und Google Fonts, gibt es in Free.

Best Practices

Beginne mit dem Theme, das deinen Farben am nächsten kommt, und passe die Akzentfarbe an.
Wähle für die Schrift Schrift der Website, wenn das Formular wie der Rest der Seite aussehen soll.
Speichere in Pro ein gelungenes Design als Stil, damit deine Formulare einheitlich bleiben.
Prüfe das Ergebnis in der Live-Vorschau auf Desktop, Tablet und Mobil.
Lege über ein Hintergrundbild eine Farbe über dem Bild, wenn Text sonst schlecht lesbar wäre.

Troubleshooting

Problem	Ursache	Lösung
Die Live-Vorschau zeigt „Behebe das, um die Vorschau zu sehen“.	Das Formular hat Probleme, die die Vorschau verhindern.	Behebe die aufgelisteten Punkte im Aufbau.
Die Schaltfläche Von einer Website übernehmen fehlt.	Du nutzt Funnelforms Free.	Stelle die Farben von Hand ein oder wechsle zu Pro.
Free: Das Formular lässt sich wegen „Eigenes CSS“ nicht veröffentlichen.	Das Formular enthält eigenes CSS, das zu Pro gehört.	Leere das Feld unter Eigenes CSS.
Free: Deine Stile und Als Stil speichern fehlen.	Gespeicherte Stile gehören zu Pro.	Stelle das Design je Formular ein oder dupliziere ein fertiges Formular.
Farben und Schrift laden ist nicht klickbar.	Die Adresse fehlt oder das Häkchen ist nicht gesetzt.	Gib die Adresse ein und setze das Häkchen.
„Auf dieser Seite wurden keine Farben oder Schriften gefunden.“	Die Seite enthält keine auslesbaren Angaben.	Probiere die Adresse der Startseite.
Der Button Google Fonts fehlt.	Die Liste der Google-Schriften konnte nicht geladen werden.	Lade den Editor neu.
Eigenes CSS wirkt nicht oder lässt sich nicht veröffentlichen.	Dein Benutzer hat nicht das Recht für ungefiltertes HTML.	Bitte jemanden mit diesem Recht, das Formular zu veröffentlichen.
Meine Schrift erscheint nur auf manchen Seiten.	Sie liegt nicht auf deiner Website.	Lade die Schriftdatei über Schrift hochladen hoch.

Tipps

Ist ein Hintergrundbild gesetzt, prüfe die Lesbarkeit auf Smartphones.
Bildgröße → Formular füllen schneidet das Bild bei Bedarf zu, Ganzes Bild zeigen nicht.
Den Fortschrittsbalken kannst du auch hier unter Ausrichtung, Fortschritt und Übergang ein- und ausschalten.

FAQ

Gilt das Design für alle meine Formulare? Nein, jedes Formular hat sein eigenes Design. Mit Als Stil speichern (nur Pro) übernimmst du ein Design in andere Formulare. In Free duplizierst du dafür ein fertiges Formular in der Formularliste.

Werden beim Laden einer Google-Schrift Daten meiner Besucher an Google gesendet? Nein. Die Schrift wird einmalig vom Server deiner Website heruntergeladen. Besucher laden sie von deiner Website.

Kann ich die Schrift pro Frage ändern? Nein, die Schriften gelten für das ganze Formular: eine für Fragen und Überschriften, eine für Antworten und Eingaben.

Kann ich das Design testen, bevor ich es veröffentliche? Ja. Die Live-Vorschau im Arbeitsbereich Design und die Vorschau oben rechts zeigen den gespeicherten Entwurf. Besucher sehen ihn erst nach dem Veröffentlichen.