### [So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)
**Veröffentlicht:** 9. Oktober 2019
**Autor:** Redaktionsteam
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie CSS zu Ihrer Website hinzufügen, um das Erscheinungsbild Ihrer WPForms-Formulare und -Felder anzupassen.
**Inhalt:**
Möchten Sie benutzerdefinierte CSS-Stile zu Ihrer Website hinzufügen? Dieses Tutorial bietet Ihnen mehrere Optionen, wie Sie diese Snippets mit Schritt-für-Schritt-Anleitungen für jede optionale Methode, die Sie zum Hinzufügen Ihres CSS wählen, zu Ihrer Website hinzufügen können.
Mit dieser hilfreichen Anleitung können Sie ganz einfach auswählen, wie Sie die Snippets zu Ihrer Website hinzufügen möchten. Sobald Sie Ihre Methode der Implementierung ausgewählt haben, können Sie mit der Erkundung der Entwicklerdokumentation beginnen, um auszuwählen, welche CSS-Snippets Sie zu Ihrer Website hinzufügen möchten!
Um die Fülle aller verfügbaren Snippets zu sehen, [erkunden Sie bitte unsere Entwicklerdokumentation](https://wpforms.com/developers/ "WPForms Entwicklerdokumentation").
Bitte sehen Sie sich unser Video-Tutorial für eine praxisnahe Ansicht an, wie Sie benutzerdefinierte CSS-Snippets zu Ihrer Website hinzufügen.
## Implementierungsoptionen
CSS ist ein leistungsstarkes Werkzeug für die Gestaltung Ihrer Website und Ihrer Formulare. Es gibt 3 Hauptansätze, um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.
#### Verwendung des WPCode-Plugins (empfohlen)
Die Verwendung des WPCode-Plugins ist sehr schnell und einfach, um CSS-Snippets zu Ihrer Website hinzuzufügen.
Einer der vielen Gründe, warum wir die Verwendung dieses Plugins zum Hinzufügen von benutzerdefinierten Snippets zu Ihrer Website dringend empfehlen, ist, dass es vor dem Speichern Ihres Snippets eine integrierte Prüfung gibt. Wenn ein Semikolon fehlt oder eine zusätzliche Klammer hinzugefügt wird, wird das Snippet nicht gespeichert. Dies verhindert, dass Probleme auf Ihrer Website aufgrund eines falsch kopierten und eingefügten CSS-Snippets auftreten. Und ja, selbst mit der kostenlosen Version erhalten Sie diese zusätzliche Prüfung, bevor Ihr Snippet aktiv wird.
Um mehr über dieses Plugin zu erfahren, [besuchen Sie bitte die Website für weitere Informationen, einschließlich dedizierter Dokumentation](https://wpcode.com/ "Header und Footer einfügen – Code-Snippets von WPCode").
Sobald das Plugin installiert ist, navigieren Sie im Menü auf der linken Seite Ihres WordPress-Dashboards zu **Code-Snippets** und wählen Sie **+ Snippet hinzufügen**. Klicken Sie dann einfach auf **Eigene Codes hinzufügen (Neues Snippet)** und dann auf die blaue Schaltfläche **Snippet verwenden**, um ein neues CSS-Snippet zu erstellen.
Wenn Ihr neuer Snippet-Bildschirm erscheint, geben Sie dem Snippet einen Namen, der für Sie sinnvoll ist, damit Sie und Ihre Website-Administratoren seinen Zweck verstehen. Wählen Sie im Dropdown-Menü **Code-Typ** die Option **CSS**, da wir nur CSS zu diesem Snippet hinzufügen werden.
Fügen Sie im Abschnitt **Code-Vorschau** Ihr CSS hinzu. Hier ist ein Beispiel für die Zwecke dieser Dokumentation.
```
/* schreiben Sie hier Ihren CSS-Code */
ul#wpforms-999-field_27 li label,
ul#wpforms-999-field_26 li label {
padding: 10px;
transition: all ease 0.3s;
background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
background-size: 200% 100%;
background-position: left bottom;
color: white;
}
ul#wpforms-999-field_27 li.wpforms-selected label,
ul#wpforms-999-field_27 li label:hover,
ul#wpforms-999-field_26 li.wpforms-selected label,
ul#wpforms-999-field_26 li label:hover {
cursor: pointer;
border-radius: 2px;
background-position: right top;
}
ul#wpforms-999-field_27 li input,
ul#wpforms-999-field_26 li input {
display: none;
}
ul#wpforms-999-field_27 li,
ul#wpforms-999-field_26 li {
float: left;
width: auto;
display: inline-block;
padding: 10px 10px 10px 0!important;
}
```
Als Nächstes sehen Sie den Abschnitt **Einfügung**. Da wir CSS hinzufügen, wählen wir für die **Einfügungsmethode** **Automatische Einfügung** und für den **Speicherort** **Website-weit im Header**.
Sobald Sie Ihr Snippet hinzugefügt haben, klicken Sie auf **Snippet speichern**. Dadurch wird das Snippet gespeichert, aber nicht automatisch aktiviert. Nachdem Sie es zunächst gespeichert haben, werden Sie feststellen, dass der Status des Snippets standardmäßig auf **Inaktiv** gesetzt ist. Schalten Sie einfach den Schalter von **Inaktiv** auf **Aktiv** und klicken Sie auf **Aktualisieren**, um das Snippet als **Aktiv** zu setzen.
#### Verwendung von CSS Hero
Wenn Sie es vorziehen, keinen Code anzufassen, hat WPForms ein vollständiges Tutorial zur Verwendung von CSS Hero. Um mehr darüber zu erfahren, [folgen Sie diesem Tutorial](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/ "So passen Sie WPForms mit CSS Hero an (ohne HTML oder CSS)").
#### Erstellen eines Child-Themes
Child-Themes werden für fortgeschrittene Entwicklungen empfohlen. Wie Sie ein Child-Theme erstellen, erfahren Sie [in diesem Tutorial](http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ "So erstellen Sie ein WordPress Child Theme (Video)
").
In jedem Child-Theme befindet sich die erforderliche **style.css**, in dieser Datei würden Sie Ihr benutzerdefiniertes CSS hinzufügen.
#### Verwendung des WordPress Customizers
Seit der WordPress-Version 4.5 bietet uns WordPress ein integriertes Werkzeug, um benutzerdefinierte CSS-Stile zu unserem Theme oder jedem installierten Plugin hinzuzufügen, was dies zu einer beliebten Wahl für das Hinzufügen unseres CSS macht.
Um mehr über den WordPress Customizer zu erfahren, [lesen Sie dessen Dokumentation](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "So fügen Sie Ihrer WordPress-Website einfach benutzerdefiniertes CSS hinzu").
Sie finden den WordPress Customizer, indem Sie zu **Design** » **Anpassen** » **Zusätzliches CSS** navigieren.
Denken Sie daran, nach dem Hinzufügen Ihres CSS auf die Schaltfläche **Veröffentlichen** zu klicken, um Ihre Änderungen zu speichern. Solange das Theme aktiv bleibt, wird Ihr benutzerdefiniertes CSS angewendet.
Wenn Sie Ihr Theme deaktivieren, wird Ihr benutzerdefiniertes CSS entfernt, da jedes hier hinzugefügte benutzerdefinierte CSS an das Theme selbst gebunden ist.
## Hinweise
Beim Hinzufügen jeglicher Art von benutzerdefiniertem Code zu Ihrer Website ist es wichtig, sicherzustellen, dass Sie Ihren Code schützen. Unabhängig davon, für welchen Ansatz Sie sich entscheiden, ist es eine gute Idee, [immer zuerst ein Backup Ihrer Website zu erstellen](http://www.wpbeginner.com/plugins/7-best-wordpress-backup-plugins-compared-pros-and-cons/ "7 beste WordPress-Backup-Plugins im Vergleich"). Auf diese Weise haben Sie bei Bedarf Zugriff auf ältere Versionen von Website-Dateien und der Datenbank.
## Zusätzliche Links
Weitere Informationen zu benutzerdefiniertem CSS für WPForms finden Sie in diesen Referenzlinks:
- [Styling-Dokumentation für WPForms](https://wpforms.com/categories/docs/styling/ "Styling-Dokumentation für WPForms")
- [Eine vollständige Liste der Dokumente zum Stylen von WPForms mit CSS](https://wpforms.com/developers/tags/css/ "Eine vollständige Liste der Dokumente zum Stylen von WPForms mit CSS")
## FAQ
#### F: Wie hilft mir das beim Hinzufügen von benutzerdefiniertem CSS für WPForms?
**A:** Dieses Tutorial ist nicht speziell für WPForms-benutzerdefiniertes CSS, sondern für **jedes** benutzerdefinierte CSS, das Sie möglicherweise zu Ihrer Website hinzufügen möchten.
Finden Sie einfach heraus, welche Option oben für Sie einfacher ist, um Code-Snippets hinzuzufügen, einschließlich der WPForms-Code-Snippets, die im Abschnitt [Tutorials](https://wpforms.com/developers/categories/tutorials/ "Tutorials") und [Snippets](https://wpforms.com/developers/categories/snippets/ "Snippets") erwähnt werden.
**Kategorien:** Erste Schritte
**Schlagwörter:** CSS
---