Der Formular-Generator von Jotform verfügt über einen integrierten Designer, mit dem Sie Ihr Formular gestalten können, ohne eine einzige Zeile Code schreiben zu müssen. Wenn Sie jedoch über die Standardoptionen hinausgehen möchten – sei es, um Abstände anzupassen, Schriftarten zu ändern oder bestimmte Elemente auszublenden – können Sie Ihr eigenes CSS einfügen, um die volle Kontrolle über das Aussehen und die Funktionalität Ihres Formulars zu übernehmen.
Note
Diese Anleitung richtet sich an die Anwendung von CSS auf klassische Formulare. Das Einfügen von benutzerdefiniertem CSS-Code wird in Kartenformularen nicht unterstützt. Wenn Sie das Layout wechseln müssen, lesen Sie unseren Leitfaden zum Wechseln des Formularlayouts für weitere Informationen.
Sie können benutzerdefinierte CSS-Codes in Ihr Formular einfügen, indem Sie ein paar einfache Schritte befolgen. So geht’s:
- Auf Ihrer Mein Arbeitsbereich-Seite klicken Sie oben auf Typ und deaktivieren Sie im Dropdown-Menü, das sich öffnet, die Kästchen neben allen Elementen außer Formulare, sodass nur diese auf der Seite angezeigt werden.
- Bewegen Sie die Maus über das Formular, dem Sie benutzerdefiniertes CSS hinzufügen möchten, und klicken Sie dann auf der rechten Seite der Seite auf Formular bearbeiten.
- Klicken Sie im Formular-Generator auf das Farbroller-Symbol oben rechts, um den Formular-Designer zu öffnen.
- Navigieren Sie nun im Stil-Tab nach unten zum Abschnitt Benutzerdefiniertes CSS einfügen und geben Sie Ihren CSS-Code in das Code-Editor-Feld ein oder fügen Sie ihn dort ein. In unserem Leitfaden Anpassen Ihres Formulars mit CSS-Codes finden Sie Beispiele für benutzerdefinierte CSS-Codes.
- Klicken Sie anschließend irgendwo außerhalb des Code-Editor, um Ihre Änderungen zu speichern.
Das war’s. Jetzt können Sie den Vorschau-Formular-Schalter in der oberen rechten Ecke der Seite aktivieren, um eine Live-Vorschau zu öffnen und genau und sehen, wie das Formular für die Nutzer aussieht.
Note
Benutzerdefinierte CSS-Codes, die im Reiter Stile des Formulardesigners hinzugefügt werden, funktionieren bei den meisten Formular-Widgets nicht, da sie innerhalb von iFrames angezeigt werden. Schauen Sie sich unseren Leitfaden an, wie Sie CSS-Codes in Widgets einfügen können, wenn Sie Ihre Formular-Widgets mit CSS gestalten möchten.
Kommentar abschicken: