KI-Zusammenfassung
Möchten Sie Formularfelder basierend auf dem Alter eines Benutzers anzeigen oder ausblenden? Durch die Kombination des Datumsfeld-Felds von WPForms mit benutzerdefinierter bedingter Logik können Sie dynamische Formulare erstellen, die sich an Benutzereingaben anpassen.
Diese Anleitung zeigt Ihnen, wie Sie ein Dropdown-Feld nur dann anzeigen, wenn der Benutzer angibt, 21 Jahre oder älter zu sein – perfekt für altersbeschränkte Inhalte, Veranstaltungsregistrierungen oder ähnliche Szenarien.
Einrichtung Ihres Formulars
Erstellen Sie zuerst ein Formular mit diesen Feldern:
- Namensfeld
- E-Mail-Feld
- Datumsfeld (für Geburtsdatum)
- Dropdown-Feld (dies wird anfangs ausgeblendet)
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars.
Hinzufügen der CSS-Klasse
Da wir möchten, dass das Dropdown-Feld beim ersten Laden des Formulars ausgeblendet wird, müssen wir ihm einen CSS-Klassennamen hinzufügen.
Wählen Sie dazu das Dropdown-Feld in Ihrem Formular-Editor aus und klicken Sie auf Erweitert. Scrollen Sie dann nach unten zu CSS-Klassen und geben Sie age-restriction ein. Stellen Sie sicher, dass Sie auf Speichern im Formular klicken, um Ihre Änderungen zu übernehmen.
Bedingte Logik für ein Datumsfeld verwenden
Nun ist es an der Zeit, den Code-Schnipsel zu Ihrer Website hinzuzufügen. Dieser Code blendet zunächst das Dropdown-Feld aus, wenn das Formular geladen wird. Dann, wenn sich das Feld Geburtsdatum ändert, berechnet er, ob der Benutzer 21 Jahre oder älter ist, und blendet das Dropdown-Feld entsprechend ein oder aus.
Denken Sie daran, diese Werte im Code zu aktualisieren:
- Die Formular-ID (2575 im Beispiel) sollte durch Ihre eigene Formular-ID ersetzt werden
- Die Datumsfeld-ID (22 im Beispiel) sollte durch Ihre Feld-ID ersetzt werden
Und das ist alles, was Sie brauchen, um bedingte Logik mit einem Datumsfeld zu verwenden. Möchten Sie als Nächstes die Position des Datumsfeld-Popups ändern? Schauen Sie sich unser Tutorial an: Position des Datumsfeld-Popups ändern.