How to Add CSS to the Form Field Focus

Markdown anzeigen

Möchten Sie verbessern, wie Ihre Formularfelder aussehen, wenn Benutzer mit ihnen interagieren? Wenn ein Benutzer auf ein Formularfeld klickt, tritt es in den sogenannten „Fokus-Zustand“ in CSS ein.

Diese Anleitung zeigt Ihnen, wie Sie attraktive visuelle Effekte hinzufügen, die Ihre Formularfelder beim Interagieren mit ihnen leicht vom Bildschirm abheben lassen.

Formularfeld-Fokus verstehen

Standardmäßig fügt WPForms einen einfachen Rahmen um Felder hinzu, wenn diese im Fokus sind (wenn ein Benutzer darauf klickt oder mit der Tabulatortaste dorthin wechselt). Wir können dieses Standardverhalten mit benutzerdefiniertem CSS verbessern, um ansprechendere visuelle Rückmeldungen zu erzeugen.

Standardmäßig haben alle Formularfelder nur den Rahmen um das Feld

Einrichtung Ihres Formulars

Erstellen Sie zuerst Ihr Formular und fügen Sie die gewünschten Felder hinzu. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars.

Hinzufügen von CSS für benutzerdefinierte Fokuseffekte

Um benutzerdefinierte Fokuseffekte hinzuzufügen, müssen Sie Ihrer Website CSS hinzufügen. Wenn Sie nicht sicher sind, wie Sie benutzerdefiniertes CSS hinzufügen, lesen Sie bitte unsere Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website.

Hier ist der CSS-Code, um einen auffälligen Fokuseffekt zu erzeugen:

Was dieses CSS bewirkt:

Fügt einen dezenten Schatteneffekt hinzu, wenn Felder im Fokus sind
Erzeugt eine sanfte Übergangsanimation
Verbessert die Schaltfläche „Senden“ mit Hover-Effekten

Durch das Hinzufügen einiger CSS-Zeilen können Sie die Formularfelder vom Bildschirm abheben lassen, wenn ein Benutzer das Feld ausfüllt

Anpassen des Codes

Sie müssen den CSS-Selektor aktualisieren, um Ihre Formular-ID anzupassen. Ersetzen Sie form#wpforms-form-1000 durch Ihre tatsächliche Formular-ID. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie unsere Anleitung zum Finden von Formular- und Feld-IDs.

Anpassungsoptionen

Sie können verschiedene Aspekte des Fokuseffekts modifizieren:

Schattenintensität

Passen Sie den Schatten an, indem Sie die Werte in box-shadow ändern:

box-shadow: 5px 5px 10px #ccc; /* horizontal, vertical, blur, color */

Animationsgeschwindigkeit

Ändern Sie die Übergangszeit:

transition: box-shadow 0.3s ease-in-out; /* property, duration, timing function */

Farben und Stile

Passen Sie die Farben und Rahmen an:

button[type=submit]:hover {
    background-color: #eee; /* Change hover background color */
    border: 1px solid #ccc; /* Change border style */
}

Häufig gestellte Fragen

F: Wie kann ich Autofokus zu meinem Formular hinzufügen?

A: Wenn Ihr Formular automatisch auf das erste Feld fokussieren soll, wenn die Seite geladen wird, lesen Sie bitte unsere Anleitung zum Hinzufügen von Autofokus zu Ihren Formularen.

Und das ist alles! Sie haben erfolgreich das benötigte CSS hinzugefügt, um den Fokus der Formularfelder zu ändern. Wenn Sie einige andere CSS-Tutorials zum Ändern des Aussehens Ihrer Formularfelder ausprobieren möchten, werfen Sie bitte einen Blick auf unseren Artikel zum Hinzufügen von Material Design zu Ihren Formularen.

CSS zum Formularfeld-Fokus hinzufügen

KI-Zusammenfassung