KI-Zusammenfassung
Möchten Sie Ihren Formularen ein modernes, interaktives Aussehen mit schwebenden Labels verleihen? Schwebende Labels bieten eine elegante Möglichkeit, Feld-Labels anzuzeigen, die animiert werden, wenn Benutzer mit Ihren Formularfeldern interagieren.
Diese Anleitung zeigt Ihnen, wie Sie diese Funktion mit WPForms implementieren.
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.
Wenn ein Telefon-Feld im Formular vorhanden ist, müssen Sie das Format entweder auf US oder International einstellen. Dieser Ausschnitt funktioniert nicht mit dem Smart-Format.
Sie müssen auch Platzhaltertext zu jedem Feld 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 dazu benötigen, lesen Sie unsere Anleitung zum Hinzufügen von Platzhaltertext zu einem Feld.
Hinzufügen von CSS-Klassen
Als Nächstes fügen wir eine CSS-Klasse namens floating zu den Feldern hinzu, für die wir schwebende Labels wünschen.
Wählen Sie jedes Feld einzeln aus, klicken Sie auf die Registerkarte Erweitert und fügen Sie floating in das Feld CSS-Klassen ein.
Schwebende Labels – PHP-Snippet
Wir fügen ein paar kleine PHP-Snippets hinzu, die das Label von oberhalb der Formularfelder nach direkt unterhalb der Formularfelder verschieben.
Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
Dieses Snippet entfernt die Position des Feld-Labels von vor dem Feld und platziert es nach dem Feld.
Schwebende Labels – CSS-Snippet
Nachdem unser Formular erstellt und unsere Snippets platziert sind, müssen wir das benutzerdefinierte CSS zu unserer Website hinzufügen, um alles zusammenzufügen.
Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, lesen Sie bitte dieses Tutorial.
FAQ
F: Funktioniert die Feldvalidierung weiterhin?
A: Absolut! Die Validierungsfehler behalten den gleichen Stil bei.
F: Warum funktioniert das bei mir nicht?
A: Stellen Sie sicher, dass Sie die obigen Schritte noch einmal durchgehen. Wenn Sie vergessen haben, den Platzhaltertext in die Felder einzufügen, scheinen die Labels keinen schwebenden Effekt zu haben, wenn ein Benutzer in das Feld klickt.
Und das ist alles! Sie haben jetzt ein Formular mit schwebenden Labels erstellt, die nach oben schweben, wenn der Benutzer beginnt, in das Feld zu tippen. Möchten Sie als Nächstes die Farbe der Bestätigungsnachricht ändern oder sie ganz entfernen? Schauen Sie sich unseren Artikel über So entfernen Sie die Formatierung der Bestätigungsnachrichtenfelder an.