Erstellen eines Formulars mit schwebenden Beschriftungen

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.

Diese Anleitung zeigt Ihnen, wie Sie diese Funktion mit WPForms implementieren können.

Inspirationen für die Gestaltung von fließenden Etiketten finden Sie in der Dokumentation zu Textfeldern von Material Design.

Ihr Formular erstellen

Wir beginnen mit der Erstellung eines einfachen Kontaktformulars. Wenn Sie Hilfe bei der Erstellung eines Formulars benötigen, lesen Sie bitte diese Dokumentation.

Wenn das Formular ein Telefonfeld enthält, müssen Sie das Format entweder auf US oder International einstellen. Dieses Snippet funktioniert nicht mit dem Smart-Format.

Sie müssen auch jedem Feld einen Platzhaltertext hinzufügen. Dieser Text kann hinzugefügt werden, indem Sie das Feld auswählen und auf die Registerkarte Erweitert klicken, um den Text hinzuzufügen.

Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zum Hinzufügen von Platzhaltertext zu einem Feld.

denken Sie daran, jedem Feld einen Platzhaltertext hinzuzufügen

Hinzufügen von CSS-Klassen

Als nächstes fügen wir eine CSS-Klasse von floating zu den Feldern, für die wir fließende Beschriftungen haben möchten.

Wählen Sie jedes Feld einzeln aus und klicken Sie auf die Schaltfläche Fortgeschrittene Registerkarte und fügen Sie floating innerhalb der CSS-Klassen Feld.

Wenn Sie mehr als eine CSS-Klasse für ein Feld verwenden, müssen Sie zwischen den einzelnen Klassennamen ein Leerzeichen einfügen.

Fügen Sie im Formularersteller unter Feldoptionen den Namen der fließenden Klasse zu den CSS-Klassen hinzu

Schwebende Beschriftungen - PHP-Snippet

Wir fügen ein paar kleine PHP-Snippets hinzu, die die Beschriftung nicht mehr über den Formularfeldern, sondern direkt unter den Formularfeldern platzieren.

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 diese Anleitung.

Dieses Snippet entfernt die Position der Feldbeschriftung, die vor dem Feld angezeigt wird, und platziert sie hinter dem Feld.

Schwebende Etiketten - CSS-Schnipsel

Nun, da unser Formular erstellt ist und unsere Snippets an Ort und Stelle sind, müssen wir das benutzerdefinierte CSS zu unserer Website hinzufügen, um das Ganze zu vervollständigen.

Wenn Sie wissen möchten, wie und wo Sie benutzerdefinierte CSS hinzufügen können, lesen Sie bitte dieses Tutorial.

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

Sie haben erfolgreich schwebende Etiketten zu Ihren WPForms hinzugefügt

FAQ

F: Wird die Feldüberprüfung weiterhin angezeigt?

A: Auf jeden Fall! Die Validierungsfehler behalten den gleichen Stil.

Fließende Etiketten mit Feldüberprüfungsfehler

F: Warum funktioniert das bei mir nicht?

A: Gehen Sie die obigen Schritte noch einmal durch. Wenn Sie den Platzhaltertext nicht in den Feldern platziert haben, haben die Beschriftungen nicht den schwebenden Effekt, wenn ein Benutzer in das Feld klickt.

Und das war's! Sie haben nun ein Formular mit schwebenden Beschriftungen erstellt, die auftauchen, wenn der Benutzer beginnt, in das Feld einzugeben. Möchten Sie nun die Farbe der Bestätigungsmeldung ändern oder sie ganz entfernen? Werfen Sie einen Blick auf unseren Artikel über das Entfernen von Bestätigungsmeldungen.

Referenz-Aktionen