Möchten Sie die Checkbox- und Multiple-Choice-Felder Ihres Formulars ansprechender gestalten? Durch das Hinzufügen fließender Übergänge bei der Auswahl von Optionen können Sie die visuelle Attraktivität Ihrer Formulare erhöhen und die Benutzerinteraktion verbessern.
Dieser Leitfaden zeigt Ihnen, wie Sie stilvolle Übergänge mit CSS implementieren können.
Einrichten Ihres Formulars
Erstellen Sie zunächst ein Formular mit Checkbox- und/oder Multiple-Choice-Feldern. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie unseren Leitfaden zum Erstellen Ihres ersten Formulars.
Notieren Sie sich Ihre Formular- und Feld-IDs, da Sie diese für das CSS benötigen. Wenn Sie nicht sicher sind, wie Sie diese IDs finden können, lesen Sie bitte unsere Anleitung zum Finden von Formular- und Feld-IDs.
Hinzufügen von Übergangsstilen
Um die Übergänge zu implementieren, müssen Sie CSS zu Ihrer Website hinzufügen. Wenn Sie nicht sicher sind, wie Sie benutzerdefinierte CSS hinzufügen können, lesen Sie bitte unsere Anleitung zum Hinzufügen von CSS zu WordPress-Seiten.
Das obige CSS wird nur auf die Formular-ID 999 angewendet. Diese muss geändert werden, damit sie mit Ihrer eigenen Formular-ID übereinstimmt. Die Feld-IDs von field_27 und field_3 müssen ebenfalls aktualisiert werden, damit sie mit den Feld-IDs für Ihre Checkbox- und Multiple-Choice-Felder in Ihrem Formular übereinstimmen.
Jedes Kontrollkästchen und jedes Multiple-Choice-Feld hat eine eigene ID. Wenn Sie also mehr als zwei in Ihrem Formular haben, duplizieren Sie einfach das CSS, ändern die Feld-ID-Nummer und trennen jedes Feld durch ein Komma.
Und das war's, Sie haben erfolgreich das CSS hinzugefügt, um einen Übergang für Checkbox und Multiple Choice zu Ihrem Formular zu erstellen.
Möchten Sie ein CSS hinzufügen, das die Textfelder des Formulars von der Seite abheben lässt, wenn der Besucher darin tippt? Sehen Sie sich unser Tutorial über das Hinzufügen von CSS zum Formularfeld-Fokus an.