KI-Zusammenfassung
Möchten Sie Ihren Formularen benutzerdefinierte Stile hinzufügen oder weitere Designvorlagen darauf anwenden? WPForms enthält standardmäßig umfangreiche Stile, um sicherzustellen, dass Ihre Formulare mit jedem WordPress-Theme gut aussehen. Dies kann es jedoch schwieriger machen, benutzerdefiniertes CSS anzuwenden oder Designvorlagen anzuzeigen.
Dieses Tutorial behandelt, wie Sie den Umfang der in Ihren Formularen enthaltenen Designvorlagen mit der Einstellung „Formular-Designvorlagen einschließen“ in WPForms auswählen.
In diesem Artikel
Anpassen der Einstellung „Formular-Designvorlagen einschließen“
Um die Menge an CSS zu ändern, die WPForms einschließt, gehen Sie zu WPForms » Einstellungen in Ihrem WordPress-Admin-Menü.
Unter dem Abschnitt Allgemein finden Sie das Dropdown-Menü Formular-Designvorlagen einschließen. Standardmäßig ist dieses Dropdown-Menü auf Basis- und Formular-Designvorlagen eingestellt.
Hinweis: Das Ergebnis jeder verfügbaren Stiloption kann von Theme zu Theme erheblich variieren. Für beste Ergebnisse empfehlen wir, die Standardoption Basis- und Formular-Designvorlagen beizubehalten.
Wenn Sie sich entscheiden, eine andere Stiloption auszuprobieren, klicken Sie auf die Schaltfläche Einstellungen speichern, um Ihre Änderungen zu speichern.
Hinweis:
- Wenn Sie Ihre Formulare im Block-Editor gestalten möchten, ohne CSS-Code zu schreiben, aktivieren Sie die Option Modernes Markup verwenden. Weitere Informationen finden Sie in unserem Leitfaden zu Formularstilen.
- Neue Benutzer mit WPForms Version 1.8.1 oder höher haben die Einstellung „Modernes Markup“ standardmäßig aktiviert. Außerdem ist die Option, sie zu deaktivieren, für neue Benutzer im WordPress-Dashboard ausgeblendet. Sehen Sie sich unseren Leitfaden an, wenn Sie lernen möchten, wie Sie diese Option auf Ihrer Einstellungsseite anzeigen.
Basis- und Formular-Designvorlagen aktivieren
Bei Verwendung von Basis- und Formular-Designvorlagen werden zwei CSS-Ebenen eingeschlossen: Basisstile und Formular-Designvorlagen.
Die Formular-Designvorlagen enthalten die aggressivsten Stile und überschreiben im Allgemeinen Stile, die Ihr WordPress-Theme anzuwenden versucht. Dies ist der beste Weg, um sicherzustellen, dass Ihre Formulare unabhängig vom gewählten Theme gut aussehen.
Als Beispiele für diese Stiloption sehen wir uns an, wie ein einfaches Formular in zwei gängigen Themes angezeigt wird: Twenty Twenty und Astra.
Zwanzig Zwanzig
Astra
Wie Sie in diesen Bildern sehen können, haben die Formulare in beiden Themes viele der gleichen Stile. Zum Beispiel haben sie die gleiche Farbe für den Absende-Button, weiße Hintergründe in den Eingabefeldern und die gleichen Schriftgrößen. Jeder dieser Stile und viele mehr stammen von den Formular-Designvorlagen.
Diese Formulare haben jedoch immer noch einige unterschiedliche Stile. Zum Beispiel macht Twenty Twenty den Text des Absende-Buttons fett, und jedes Formular übernimmt die Schriftart des WordPress-Themes.
Nur Basis-Designvorlagen aktivieren
Die Option Nur Basisstile schließt keine Formular-Designvorlagen ein. Stattdessen werden nur die Basisstile für WPForms eingeschlossen.
In den meisten Fällen ist der auffälligste Unterschied bei dieser Einstellung der Button-Stil. Die Basisstile von WPForms enthalten keine Button-Stile, sodass die gesamte Button-Gestaltung von Ihrem Website-Theme stammt.
Allerdings werden viele andere Stile jetzt auch von Ihrem Theme übernommen. Bei den meisten Themes werden Sie mit dieser Einstellung wahrscheinlich ziemlich deutliche Stilunterschiede feststellen.
Wir verwenden dieselben Themes wie oben als Beispiele für diese Einstellung in den folgenden Screenshots. Sie werden feststellen, dass einige neue Unterschiede nun die Schriftgröße der Feldbezeichnungen, die Schriftstärke der Unterbezeichnungen, die Hintergrundfarbe der Eingabefelder und die Button-Stile umfassen.
Zwanzig Zwanzig
Astra
Häufige Probleme mit Basis-Styling und deren Behebung
Wenn Sie nur die Einstellung „Basis-Styling“ verwenden, können je nach Layout Ihrer Formulare und anderen aktivierten Funktionen einige Probleme auftreten. Nachfolgend haben wir erklärt, wie die häufigsten Probleme behoben werden können.
Hinweis: Möchten Sie Ihrem Formular-Button benutzerdefinierte Stile hinzufügen, aber Probleme mit der Einstellung „Nur Basis-Styling“ vermeiden? Sehen Sie sich unser Tutorial zum Styling von Submit-Buttons an, damit Sie stattdessen unsere Einstellung „Basis- und Formular-Theme-Styling“ verwenden können.
Mehrspaltige Layouts
Mit der Einstellung „Nur Basis-Styling“ funktionieren mehrspaltige Layouts im Allgemeinen nicht richtig. Um dies zu beheben, müssen Sie entweder zur Option Basis- und Formular-Theme-Styling zurückkehren oder den folgenden CSS-Code zu Ihrer Website hinzufügen:
Hinweis: Wenn Sie unsicher sind, wie Sie benutzerdefinierte CSS-Snippets verwenden, lesen Sie bitte das Tutorial von WPBeginner, wie Sie benutzerdefiniertes CSS zu Ihrer Website hinzufügen.
Formular-Designvorlagen entfernen (Keine Stile)
Die Option Kein Styling verhindert, dass alle WPForms-Stile für Ihre eingebetteten Formulare geladen werden. Das bedeutet, dass die einzigen Stile, die Sie in Ihren Formularen sehen, von Ihrem WordPress-Theme stammen.
Hinweis: Die Option Kein Styling ist nur für Entwickler gedacht und erfordert umfangreiches benutzerdefiniertes CSS.
Zusätzlich werden viele Formularoptionen mit dieser Einstellung nicht mehr richtig funktionieren. Zum Beispiel werden alle Formularlayouts entfernt und die Seiten von mehrseitigen Formularen werden alle gleichzeitig sichtbar sein.
Das ist alles! Jetzt kennen Sie alles, was Sie brauchen, um die beste Formular-Styling-Option für Ihre Website zu ermitteln.
Möchten Sie als Nächstes erfahren, wie Sie den Submit-Button Ihres Formulars anpassen können? Lesen Sie unbedingt unser Tutorial zum Styling von Submit-Buttons für Details zur Anpassung von Button-Farben, -Größe und mehr.