### [So fügen Sie Ihren Formularfeldern mit CSS Material Design hinzu](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/)

**Veröffentlicht:** 26. August 2020
**Autor:** Umair Majeed

**Auszug:** In diesem Tutorial erfahren Sie, wie Sie mit PHP und CSS Material Design zu Ihren Formularfeldern hinzufügen können. 

**Inhalt:**

Möchten Sie Material Design zu Ihren WPForms-Feldern hinzufügen? Diese Art von Design ist eine sehr beliebte Methode, um Ihren Formularfeldern ein modernes und klares Aussehen zu verleihen. Mit einem kleinen PHP-Snippet in Kombination mit CSS können Sie diesen Look ganz einfach auf Ihre WPForms anwenden.

In diesem Tutorial führen wir Sie Schritt für Schritt durch den Prozess.

Weitere Informationen zu den Prinzipien von Material Design finden Sie in der [Google-Dokumentation zu Material Design](https://m3.material.io/).

## Erstellen Ihres Formulars

Zunächst müssen Sie Ihr Formular erstellen und die gewünschten Felder hinzufügen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, [lesen Sie bitte dieses Tutorial](https://wpforms.com/docs/creating-first-form/ „So erstellen Sie Ihr erstes Formular“).

Für die Zwecke dieses Tutorials erstellen wir einfach ein einfaches Feedback-Formular. Unser Beispiel enthält die Formularfelder **Name**, **E-Mail**, **Betreff** und **Text**.

![Erstellen Sie Ihr Formular und fügen Sie Ihre Felder hinzu](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design-create-form.jpg)Beachten Sie bitte, dass sich unser Tutorial darauf konzentriert, diese Art von Design **nur** auf Felder anzuwenden, die direkte Texteingaben akzeptieren. Das Hinzufügen dieses Designs zu allen Formularfeldern führt möglicherweise nicht zu dem gewünschten Ergebnis. Testen Sie Ihr Formular daher zunächst, um sicherzustellen, dass das Erscheinungsbild genau Ihren Vorstellungen entspricht.

## Material Design – PHP-Snippet

Als Nächstes fügen wir ein kleines PHP-Snippet hinzu. Dies ist erforderlich, um die Beschriftung des Formularfelds von vor dem Feld nach hinter das Feld zu verschieben.

Wenn Sie Hilfe beim Hinzufügen eines Code-Schnipsels zu Ihrer Website benötigen, [lesen Sie bitte dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ „Wie man benutzerdefiniertes PHP oder JavaScript für WPForms hinzufügt“).

Dieser Codeausschnitt wird nur für das Formular mit der ID **697** ausgeführt. Wenn die Formular-ID übereinstimmt, entfernt unsere erste Funktion **wpf\_dev\_display\_field\_before** die PHP-Aktion, die die Feldbeschriftung so einstellt, dass sie **vor** dem Formularfeld angezeigt wird. Die nächste Funktion sorgt dann dafür, dass die Beschriftung **hinter** dem Formularfeld erscheint.

## Material Design – CSS-Snippet

Als letzten Schritt fügen Sie dieses CSS zu Ihrer Website hinzu, wodurch alle unsere Formularfelder das Material-Design erhalten.

Ersetzen Sie **697** in allen Selektoren durch Ihre Formular-ID.

Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, [lesen Sie bitte dieses Tutorial.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ „So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu“)

![Sie haben nun Material Design zu Ihrem Formular hinzugefügt](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design.jpg)Und das war’s schon! Sie haben nun den Material-Design-Look zu Ihren Formularfeldern hinzugefügt! Wenn Sie andere CSS-Lösungen ausprobieren möchten, werfen Sie einen Blick auf unsere gesamte [Styling-Dokumentation](https://wpforms.com/categories/docs/styling/ „WPForms Styling-Dokumentation“).

## Referenz-Aktionen

- [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ „Verwendung der Aktion wpforms_display_field_after“)
- [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ „Verwendung der Aktion wpforms_display_field_before“)

**Kategorien:** Tutorials

**Tags:** CSS, PHP

---