Hola.
Por defecto, WPForms no incluye una opción para calcular automáticamente la edad a partir de una fecha de nacimiento en su versión gratuita. Las funciones de cálculo avanzado suelen estar en la versión Pro y, aun así, están más orientadas a operaciones numéricas que a la lógica de fechas.
Podemos solucionarlo añadiendo un pequeño fragmento de código JavaScript.
Vamos a configurar tus campos de WPForms y luego añadiremos el código necesario
Paso 1: Configurar los campos en WPForms
Primero, asegúrate de que tu formulario tiene los dos campos que necesitamos: uno para la fecha de nacimiento y otro para mostrar la edad.
- Campo de Fecha de Nacimiento:
- Añade un campo de «Fecha / Hora» a tu formulario.
- En la etiqueta, escribe algo como «Fecha de nacimiento».
- Ve a las opciones Avanzadas de este campo. En el campo «Clases CSS», escribe
fecha-nacimiento. Usaremos esta clase para identificar el campo con nuestro código.
- Campo para la Edad:
- Añade un campo de «Texto de una línea» o «Número».
- En la etiqueta, pon «Edad».
- Ve a las opciones Avanzadas. En el campo «Clases CSS», escribe
edad-calculada.
- Para evitar que los usuarios modifiquen la edad manualmente, activa la opción «Solo lectura».
Paso 2: Añadir el código JavaScript
Ahora necesitamos añadir el código que hará el cálculo. La mejor manera de añadir código JavaScript en WordPress, y la más segura, es usando un plugin específico para ello. Esto evita que pierdas los cambios si actualizas tu tema.
Si no tienes un plugin de gestión de código indtalado, puedes usar Code Snippets.
Crea un snippet de Javascript con este código:
document.addEventListener('DOMContentLoaded', function() {
// Busca el formulario de WPForms en la página.
// Usamos un selector general para que funcione en cualquier formulario.
const formContainer = document.querySelector('.wpforms-container');
if (formContainer) {
// Añadimos un listener que se activa cada vez que hay un cambio dentro del formulario.
formContainer.addEventListener('input', function(event) {
// Verificamos si el cambio ocurrió en nuestro campo de fecha de nacimiento.
if (event.target.closest('.fecha-nacimiento')) {
const fechaNacimientoInput = event.target;
const edadInput = formContainer.querySelector('.edad-calculada input');
if (fechaNacimientoInput.value && edadInput) {
// Obtenemos la fecha de nacimiento introducida.
const fechaNacimiento = new Date(fechaNacimientoInput.value);
// Obtenemos la fecha actual.
const hoy = new Date();
// Calculamos la diferencia de años.
let edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
const mes = hoy.getMonth() - fechaNacimiento.getMonth();
// Ajustamos la edad si aún no ha cumplido años este año.
if (mes < 0 || (mes === 0 && hoy.getDate() < fechaNacimiento.getDate())) {
edad--;
}
// Mostramos la edad en el campo de solo lectura.
// Si la edad es negativa (fecha futura), mostramos 0.
edadInput.value = Math.max(0, edad);
} else if (edadInput) {
// Si el campo de fecha se vacía, vaciamos también el de edad.
edadInput.value = '';
}
}
});
}
});
Asegúrate de que se ejecute en todos los sitios y se coloque en el footer.
Ahora, cuando un usuario seleccione una fecha en el campo de nacimiento, la edad se calculará y aparecerá automáticamente en el campo «Edad».
Este código calcula y muestra la edad. Si además necesitas validar que la edad esté entre 3 y 10 años, podemos añadir una validación extra con JavaScript.
Hacemos esto con JavaScript (que se ejecuta en el navegador del usuario o «front-end») porque proporciona una respuesta instantánea sin necesidad de recargar la página, lo que mejora mucho la experiencia de usuario (UX).
Si tienes alguna otra duda o te encuentras con algún problema, no dudes en preguntar. Y recuerda hacer una copia de seguridad del sitio antes de insertar cualquier código.
Saludos.
