KI-Zusammenfassung
Möchten Sie das Erscheinungsbild Ihrer WordPress-Formulare anpassen? In WPForms können Sie ganz einfach benutzerdefinierte CSS-Klassen und Stile hinzufügen, um Ihren Formularen das gewünschte Aussehen zu verleihen.
Diese Anleitung zeigt Ihnen, wie Sie benutzerdefinierte CSS-Klassen hinzufügen, um bestimmte Formularelemente zu gestalten, sowie wie Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen.
In diesem Artikel
Hinweis: Wenn Sie neu in CSS sind, ist unser Leitfaden für Anfänger zur Gestaltung von Formularen mit CSS der beste Ausgangspunkt.
Was ist eine CSS-Klasse?
CSS-Klassen sind eine Möglichkeit, die Elemente anzusprechen, die Sie auf Ihrer Website gestalten möchten.
In WPForms werden Feldern automatisch mehrere CSS-Klassen zugewiesen. Wenn beispielsweise ein Feld auf eine Feldgröße von Groß eingestellt ist, wird ihm die CSS-Klasse wpforms-field-large zugewiesen.
Durch das Hinzufügen einer benutzerdefinierten CSS-Klasse können Sie ganz einfach ein bestimmtes Formularfeld ansprechen oder mehrere Felder mit denselben Stilen versehen.
Hinweis: Wenn Sie Ihre Formulare gestalten möchten, ohne benutzerdefinierte CSS-Klassen zu verwenden oder Code zu schreiben, sollten Sie sich unsere Anleitung zur Formulargestaltung ansehen.
Benutzerdefinierte CSS-Klassen in WPForms hinzufügen
In WPForms können Sie Ihre eigenen benutzerdefinierten CSS-Klassen zu einzelnen Formularfeldern, dem Absende-Button oder dem Container um Ihr Formular herum hinzufügen.
CSS-Klassen zu einzelnen Formularfeldern hinzufügen
Um eine benutzerdefinierte CSS-Klasse zu einem Formularfeld hinzuzufügen, müssen Sie ein neues Formular erstellen oder ein vorhandenes Formular bearbeiten.
Klicken Sie im Vorschaufenster des Formular-Builders auf das Feld, um dessen Feldoptionen zu öffnen. Öffnen Sie dann den Tab Erweitert und suchen Sie das Feld mit der Bezeichnung CSS-Klassen.
Bei der Benennung einer CSS-Klasse dürfen Sie nur Buchstaben oder Zahlen verwenden, Leerzeichen sind nicht erlaubt. Klassennamen sind Groß-/Kleinschreibung-sensitiv, daher wird empfohlen, Kleinbuchstaben zu verwenden. Wenn der Klassenname aus mehreren Wörtern bestehen soll, verwenden Sie einen Bindestrich (-) oder Unterstrich (_) anstelle eines Leerzeichens.
Um Probleme zu vermeiden, beginnen Sie Klassennamen immer mit einem Buchstaben.
In diesem Beispiel nennen wir unsere CSS-Klasse wpf-blue-background.
Indem wir wpf- am Anfang unserer Klassen hinzufügen, ist es unwahrscheinlicher, dass wir einen Klassennamen verwenden, der bereits vom Theme unserer Website verwendet wird. Dies hilft, Stilkonflikte zu vermeiden und stellt sicher, dass unsere Stile erfolgreich angewendet werden.
Wenn Sie bereit sind, fügen Sie die CSS-Klasse wpf-blue-background in das Feld CSS-Klassen ein.
Wenn Sie möchten, können Sie diesem Feld auch zusätzliche Klassen hinzufügen. Fügen Sie dazu einfach ein Leerzeichen zwischen den einzelnen Klassennamen ein. Zum Beispiel:
wpf-blauer-hintergrund wpf-fettgedruckte-schrift wpf-xl-abstand
Hinweis: Das Feld CSS-Klassen kann auch verwendet werden, um Formularfelder in einem Mehrspaltenlayout und als Einspaltenlayout auf Mobilgeräten anzuzeigen.
CSS-Klassen zu einem Formular-Container oder Absende-Button hinzufügen
Für einige Stile kann es nützlich sein, den Container des Formulars oder dessen Absende-Button anzusprechen.
Sie m uevo00fcssen beispielsweise m uevo00f6glicherweise die Submit-Buttons f uevo00fcr alle Anmeldeformulare auf Ihrer Website auf eine bestimmte Weise gestalten und die Submit-Buttons in allgemeinen Kontaktformularen anders. Eine einfache M uevo00f6glichkeit, dies zu erreichen, besteht darin, denselben CSS-Klassen zu allen Submit-Buttons hinzuzuf uevo00fcgen, die Sie auf die gleiche Weise gestalten m uevo00f6chten.
Um eine benutzerdefinierte CSS-Klassenbezeichnung f uevo00fcr eine der Optionen hinzuzuf uevo00fcgen, uevo00f6ffnen Sie den Formular-Generator und gehen Sie zu Einstellungen » Allgemein. Von hier aus gehen Sie zum Abschnitt Erweitert und Sie k uevo00f6nnen Felder f uevo00fcr Formular-CSS-Klasse und Submit-Button-CSS-Klasse sehen.
Wenn Sie mehr als eine Klassenbezeichnung hinzuf uevo00fcgen m uevo00f6chten, trennen Sie jede einfach durch ein Leerzeichen.
Hinweis: Wenn Sie m uevo00f6chten, k uevo00f6nnen Sie eine integrierte Formular-CSS-Klasse verwenden, um Ihr Formular in einer einzigen Zeile anzuzeigen.
Erstellen und Hinzufügen von CSS-Stilen für Ihre Website
Nachdem Sie einem Feld in Ihrem Formular eine benutzerdefinierte CSS-Klasse hinzugef uevo00fcgt haben, k uevo00f6nnen Sie die Stile erstellen, die angewendet werden sollen.
Erstellung von CSS-Stilen
CSS ist ein leistungsstarkes Werkzeug mit einer gro uevo00dfen Auswahl an Verf uevo00fcgbaren Styling-Optionen. Anleitungen zum Einstieg in die Erstellung von CSS finden Sie in unserem Leitfaden f uevo00fcr CSS-Anf uevo00e4nger.
In unserem Beispiel f
uevo00fcgen wir einfach einen blauen Hintergrund zu jedem Feld mit der Klasse wpf-blue-background hinzu. Wenn Sie auf einen Klassennamen in CSS abzielen, muss dieser immer mit einem Punkt (.) beginnen, zum Beispiel .wpf-blue-background.
Da bereits viele Stile auf Ihr Formular angewendet werden, ist es auch eine gute Idee, Ihr CSS spezifischer zu gestalten. F
uevo00fcgen Sie dazu einfach .wpforms-form vor Ihrem benutzerdefinierten Klassennamen hinzu.
Hier ist unser Beispiel-CSS:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Wenn Ihre benutzerdefinierten Stile nicht erfolgreich angewendet werden, k uevo00f6nnen Sie !important vor dem Semikolon einf uevo00fcgen.
Hinweis: Die Verwendung von !important ist nur notwendig, wenn Ihre Stile andernfalls nicht angewendet werden. Unser Leitfaden zur Fehlerbehebung bei CSS enth uevo00e4lt weitere Details.
Hinzuf uevo00fcgen von CSS zu Ihrer WordPress-Website
Eine schnelle und einfache M uevo00f6glichkeit, benutzerdefiniertes CSS zu Ihrer Website hinzuzuf uevo00fcgen, ist der WordPress Theme Customizer. Dies ist eine beliebte Option, da sie in fast allen Themes verf uevo00fcgbar ist und einen Live-Vorschau-Bereich bietet.
Um auf den CSS-Bereich des Theme Customizers zuzugreifen, gehen Sie zu Darstellung » Anpassen und w uevo00e4hlen Sie dann den Reiter Zus uevo00e4tzliches CSS.
F uevo00fcgen Sie als N uevo00e4chstes Ihren benutzerdefinierten CSS-Snippet hinzu. Wenn Sie fertig sind, klicken Sie auf Ver uevo00f6ffentlichen.
So sieht unser Beispielformular jetzt mit der angewendeten CSS-Klasse und den CSS-Stilen aus:
Hinweis: Ihre benutzerdefinierten Stile werden nicht angezeigt? Sehen Sie sich unseren Leitfaden zur Fehlerbehebung bei CSS f uevo00fcr die h uevo00e4ufigsten Probleme und L uevo00f6sungen an.
Eine weitere M uevo00f6glichkeit, benutzerdefiniertes CSS hinzuzuf uevo00fcgen, das bei Theme-Wechseln konsistent bleibt, ist die Verwendung von WPCode. Anleitungen zur Anwendung von benutzerdefiniertem CSS mit WPCode, einschlie uevo00fclich der Verwendung seiner Bibliothek von vorgefertigten CSS-Code-Snippets, finden Sie in unserem Leitfaden zur Verwendung von Code-Snippets.
Wenn Sie zusätzliche Methoden zum Hinzufügen von CSS sehen möchten, lesen Sie bitte das Tutorial von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS zu WordPress.
Das ist alles! Sie können jetzt benutzerdefinierte CSS-Klassen hinzufügen, um bestimmte Bereiche Ihrer Formulare zu gestalten.
Möchten Sie auch unsere integrierten Formularstile anzeigen und ändern? Lesen Sie unser Tutorial zur Anpassung einzelner Formularfelder für alle Details.