### [Erstellen eines Formulars mit schwebenden Beschriftungen](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/)

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

**Auszug:** Dieses Tutorial führt Sie durch die Schritte zur Verwendung von PHP und CSS, um Ihr Formular so anzupassen, dass schwebende Beschriftungen für Ihre Formularfelder verwendet werden. 

**Inhalt:**

Möchten Sie Ihren Formularen mit schwebenden Beschriftungen ein modernes, interaktives Aussehen verleihen? Schwebende Beschriftungen bieten eine elegante Möglichkeit, Feldbeschriftungen anzuzeigen, die animiert werden, wenn Benutzer mit Ihren Formularfeldern interagieren.

Dieser Leitfaden zeigt Ihnen, wie Sie diese Funktion mit WPForms implementieren können.

Inspiration für das Design von schwebenden Beschriftungen finden Sie in der [Dokumentation zu Material Design](https://material.io/develop/web/supporting/floating-label) zu Textfeldern.

## Erstellen Ihres Formulars

Wir beginnen mit der Erstellung eines einfachen Kontaktformulars. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/creating-first-form/ „Erstellen Ihres ersten Formulars“).

Wenn das Formular ein Feld für **Telefon** enthält, müssen Sie das Format entweder auf **US** oder **International** einstellen. Dieser Codeausschnitt funktioniert nicht mit dem **Smart**-Format.

Außerdem müssen Sie jedem Feld einen **Platzhaltertext** hinzufügen. Diesen Text können Sie hinzufügen, indem Sie das Feld auswählen und auf die Registerkarte **Erweitert** klicken, um den Text einzugeben.

Wenn du Hilfe dazu benötigst, lies dir unseren Leitfaden zum [Hinzufügen von Platzhaltertext zu einem Feld](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/) durch.

![Denken Sie daran, jedem Feld Platzhaltertext hinzuzufügen](https://wpforms.com/wp-content/uploads/2022/08/wpforms-float-labels-add-placeholder.jpg)## CSS-Klassen hinzufügen

Als Nächstes fügen wir den Feldern, für die wir schwebende Beschriftungen wünschen, die CSS-Klasse `floating` hinzu.

Wählen Sie jedes Feld einzeln aus, klicken Sie auf die Registerkarte **Erweitert** und fügen Sie `floating` in das Feld **CSS-Klassen** ein.

Wenn Sie mehr als eine CSS-Klasse für ein Feld verwenden, achten Sie darauf, zwischen den einzelnen Klassennamen ein Leerzeichen einzufügen.

![Fügen Sie im Formular-Generator unter „Feldoptionen“ den Namen der Floating-Klasse zu den CSS-Klassen hinzu](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-add-css-class.jpg)## Floating Labels – PHP-Snippet

Wir fügen nun ein paar kleine PHP-Snippets hinzu, die die Beschriftung von oberhalb der Formularfelder direkt unter die Formularfelder verschieben.

Ersetzen Sie **1289** in **Zeile 10** und **Zeile 28** durch Ihre Formular-ID.

Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, [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 Snippet sorgt dafür, dass die Feldbeschriftung nicht mehr **vor** dem Feld angezeigt wird, sondern **hinter** dem Feld platziert wird.

## Floating Labels – CSS-Snippet

Nachdem unser Formular nun erstellt ist und unsere Snippets an der richtigen Stelle stehen, müssen wir das benutzerdefinierte CSS zu unserer Website hinzufügen, um alles zusammenzuführen.

Wenn Sie Hilfe dabei benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, [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“).

Ersetzen Sie **1682** in **Zeile 1** und **Zeile 4** durch Ihre Formular-ID.

![Sie haben erfolgreich schwebende Beschriftungen zu Ihren WPForms hinzugefügt](https://wpforms.com/wp-content/uploads/2022/08/wpforms-create-floating-label.jpg)## FAQ

#### F: Werden die Feldvalidierungen weiterhin angezeigt?

**A:** Auf jeden Fall! Die Validierungsfehler behalten denselben Stil bei.

![Floating Labels mit Feldvalidierungsfehler](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-labels-validation-error.jpg)#### F: Warum funktioniert das bei mir nicht?

**A:** Gehen Sie die oben genannten Schritte noch einmal durch. Wenn Sie vergessen haben, den **Platzhalter**-Text in die Felder einzufügen, wird der schwebende Effekt der Beschriftungen nicht angezeigt, wenn ein Benutzer in das Feld klickt.

Das war’s schon! Sie haben nun ein Formular mit schwebenden Beschriftungen erstellt, die erscheinen, sobald der Benutzer beginnt, in das Feld zu tippen. Möchten Sie als Nächstes die Farbe der Bestätigungsmeldung ändern oder diese ganz entfernen? Werfen Sie einen Blick auf unseren Artikel [So entfernen Sie das Styling des Bestätigungsfensters](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "So entfernen Sie das Styling des Bestätigungsfensters").

## Referenzaktionen

- [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

---