Resumen de IA
¿Quieres mostrar u ocultar campos de formulario basándote en la edad de un usuario? Combinando el campo Selector de fecha de WPForms con lógica condicional personalizada, puedes crear formularios dinámicos que se adaptan a la entrada del usuario.
Esta guía te mostrará cómo mostrar un campo desplegable solo cuando el usuario indique que tiene 21 años o más, perfecto para contenido con restricciones de edad, registros de eventos o escenarios similares.
Configuración de tu formulario
Primero, crea un formulario con estos campos:
- Campo de nombre
- Campo de correo electrónico
- Campo de fecha (para Fecha de nacimiento)
- Campo desplegable (este estará oculto inicialmente)
Si necesitas ayuda para crear tu formulario, consulta nuestra guía sobre cómo crear tu primer formulario.
Añadir la clase CSS
Como queremos que el campo Desplegable esté oculto cuando el formulario se cargue por primera vez, necesitamos añadirle un nombre de clase CSS.
Para hacerlo, selecciona el campo Desplegable en tu editor de formularios y haz clic en Avanzado. Luego, desplázate hacia abajo hasta Clases CSS e introduce age-restriction. Asegúrate de hacer clic en Guardar en el formulario para conservar tus cambios.
Usar lógica condicional para un campo de fecha
Ahora es el momento de añadir el fragmento de código a tu sitio. Este código primero ocultará el campo Desplegable cuando el formulario se cargue. Luego, 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 ser reemplazado por tu propio ID de formulario
- El ID del campo Selector de fecha (22 en el ejemplo) debe ser reemplazado por tu ID de campo
Y eso es todo lo que necesitas para usar la Lógica Condicional con un campo selector de fecha. A continuación, ¿te gustaría cambiar la posición del popup del selector de fecha? Consulta nuestro tutorial sobre Cómo cambiar la posición del popup del selector de fecha.