¿Desea mostrar u ocultar campos de formulario en función de la edad del usuario? Combinando el campo Date Picker de WPForms con lógica condicional personalizada, puede crear formularios dinámicos que se adapten a la entrada del usuario.
Esta guía le mostrará cómo mostrar un campo desplegable sólo cuando el usuario indique que tiene 21 años o más, lo que resulta perfecto para contenidos con restricciones de edad, inscripciones a eventos o situaciones similares.
Configuración del formulario
En primer lugar, cree un formulario con estos campos:
- Campo Nombre
- Campo Email
- Campo Fecha (para la fecha de nacimiento)
- Campo desplegable (inicialmente estará oculto)
Si necesita ayuda para crear su formulario, consulte nuestra guía sobre la creación de su primer formulario.
Añadir la clase CSS
Como queremos que el campo desplegable esté oculto cuando se cargue el formulario por primera vez, tenemos que añadirle un nombre de clase CSS.
Para ello, seleccione la opción Desplegable en el editor de formularios y haga clic en Avanzado. A continuación, desplácese hasta Clases de CSS e introduzca age-restriction. Asegúrese de hacer clic en Guardar en el formulario para conservar los cambios.
Uso de la lógica condicional para un campo Fecha
Ahora es el momento de añadir el fragmento de código a su sitio. Este código primero ocultará el campo desplegable cuando se cargue el formulario. A continuación, cada vez que cambie el campo Fecha de nacimiento, calculará si el usuario tiene 21 años o más y mostrará u ocultará el campo desplegable en consecuencia.
Recuerda actualizar estos valores en el código:
- El ID del formulario (2575 en el ejemplo) debe sustituirse por su propio ID de formulario
- El ID de campo del selector de fecha (22 en el ejemplo) debe sustituirse por su ID de campo
Y eso es todo lo que necesita para utilizar la Lógica Condicional con un campo selector de fecha. A continuación, ¿le gustaría cambiar la posición de la ventana emergente del selector de fecha? Consulte nuestro tutorial sobre Cómo cambiar la posición de la ventana emergente del selector de fecha.