Seguro que te ha pasado. Estás creando un formulario de inscripción para un evento, un campamento de verano o una asociación. Pides la fecha de nacimiento, un dato clave, pero a menudo necesitas más: la edad exacta. Y no solo eso, muchas veces tienes que validar si esa edad cumple un requisito (ser mayor de 18, o tener entre 8 y 12 años para ese campamento). ¿Y si el formulario hiciera todo ese trabajo por ti, en tiempo real?
Pues deja de imaginarlo, porque hoy vas a aprender a hacerlo. Vamos a construir una solución universal que podrás usar en cualquier formulario, sin depender de un plugin específico. Usaremos los tres pilares de la web: HTML, JavaScript y CSS, para crear un formulario inteligente que calcula y valida la edad al instante.
Los 3 ingredientes de nuestra receta
Para cocinar este plato no necesitamos herramientas complejas. Solo los tres lenguajes básicos que hacen funcionar toda la web:
- HTML: Será el esqueleto, la estructura básica de nuestro formulario.
- JavaScript: El cerebro. Se encargará de escuchar, calcular, validar y tomar decisiones en tiempo real.
- CSS: El toque de estilo. Haremos que nuestros mensajes de error se vean claros y profesionales.
Paso 1: Preparando el formulario (el esqueleto)
Nuestro objetivo es tener tres elementos clave en el formulario a los que podamos apuntar con nuestro código: un campo para la fecha de nacimiento, un campo para la edad y el botón de envío. Para identificarlos sin error, usaremos el atributo id, que funciona como el DNI de un elemento en una página web: es único e intransferible.
Tienes dos maneras de preparar este esqueleto en WordPress.
Opción A: Con tu plugin de formularios favorito
No importa qué plugin uses (Elementor Forms, Fluent Forms, Contact Form 7, WPForms, etc.), el proceso es prácticamente el mismo.
- Añade los campos: Crea un campo de tipo «Fecha» para la fecha de nacimiento y un campo de tipo «Número» o «Texto» para la edad.
- Busca las opciones avanzadas: Haz clic en cada campo para ver sus opciones. Casi todos los plugins tienen una pestaña o sección llamada «Avanzado».
- Asigna los
id: Dentro de las opciones avanzadas, busca un campo llamado «ID de CSS» o «Custom ID». Aquí es donde pondrás los identificadores:- Para el campo de fecha:
fechaNacimiento - Para el campo de edad:
edad - Para el botón de envío (si tu plugin lo permite):
botonEnviar
- Para el campo de fecha:
- Haz el campo de edad de solo lectura: Busca una opción que diga «Solo lectura» o algo similar en el campo de la edad y actívala. No queremos que nadie pueda modificarla a mano.
Opción B: Con un bloque de HTML Personalizado
Si prefieres tener control total o no usas un plugin de formularios, siempre puedes usar el bloque «HTML Personalizado» del editor de WordPress y pegar este código directamente:
<form id="formularioInscripcion">
<div>
<label for="fechaNacimiento">Fecha de nacimiento:</label>
<input type="date" id="fechaNacimiento" name="fecha_nacimiento" required>
</div>
<div style="margin-top: 15px;">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" readonly style="background-color: #f0f0f0;">
<div id="mensajeErrorEdad"></div>
</div>
<div style="margin-top: 20px;">
<button type="submit" id="botonEnviar">Enviar inscripción</button>
</div>
</form>
Lenguaje del código: PHP (php)Paso 2: El cerebro de la operación (el código JavaScript)
Para que nuestro código funcione, debemos añadirlo al sitio de forma segura y eficiente. La mejor práctica es usar un plugin de inserción de código. Esto evita que pierdas tus cambios si actualizas el tema y mantiene todo organizado.
Existen varias opciones excelentes como WPCode (antes conocido como Insert Headers and Footers), Code Snippets, o incluso las funciones de código personalizado de maquetadores como Elementor Pro. El proceso en todos ellos es muy similar:
- Busca la opción para crear un nuevo «snippet» o fragmento de código.
- Dale un nombre que puedas reconocer, como «Lógica de validación de edad».
- Asegúrate de que el tipo de código sea JavaScript.
- Pega el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
// --- CONFIGURACIÓN PERSONALIZABLE ---
// Define aquí el rango de edad que necesitas validar.
const edadMinima = 8;
const edadMaxima = 12;
// ------------------------------------
// 1. Seleccionamos los elementos del formulario por su ID único.
const campoFecha = document.getElementById('fechaNacimiento');
const campoEdad = document.getElementById('edad');
const botonEnviar = document.getElementById('botonEnviar');
// Necesitamos un contenedor para el error, lo buscamos o lo creamos si no existe.
let contenedorError = document.getElementById('mensajeErrorEdad');
if (!contenedorError && campoEdad) {
contenedorError = document.createElement('div');
contenedorError.id = 'mensajeErrorEdad';
campoEdad.parentElement.appendChild(contenedorError);
}
// 2. Nos aseguramos de que los elementos cruciales existen.
if (!campoFecha || !campoEdad || !botonEnviar) {
console.warn('Faltan uno o más elementos del formulario en la página. Verifica los IDs.');
return; // Detenemos el script si no encuentra algo.
}
// 3. Creamos un "oyente" que se activa cada vez que cambia la fecha.
campoFecha.addEventListener('input', function() {
const fechaNacimientoStr = this.value;
if (!fechaNacimientoStr) {
campoEdad.value = '';
contenedorError.textContent = '';
botonEnviar.disabled = false;
return;
}
// 4. Calculamos la edad.
const fechaNacimiento = new Date(fechaNacimientoStr);
const hoy = new Date();
let edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
const diferenciaMeses = hoy.getMonth() - fechaNacimiento.getMonth();
if (diferenciaMeses < 0 || (diferenciaMeses === 0 && hoy.getDate() < fechaNacimiento.getDate())) {
edad--;
}
campoEdad.value = edad;
// 5. Validamos si la edad está en el rango permitido.
if (edad >= edadMinima && edad <= edadMaxima) {
contenedorError.textContent = '';
botonEnviar.disabled = false;
} else {
contenedorError.textContent = 'La edad debe estar entre ${edadMinima} y ${edadMaxima} años.';
botonEnviar.disabled = true;
}
});
});
Lenguaje del código: PHP (php)- Configura la ubicación o posición del snippet. La opción recomendada es «Footer» (pie de página), para que se cargue después del contenido de la página y no afecte a la velocidad de carga inicial.
- Activa y guarda el código.
Paso 3: Un toque de estilo con CSS
Un mensaje de error funciona mejor si llama la atención. Añade este CSS en Apariencia > Personalizar > CSS adicional para darle un aspecto más profesional.
/* Estilo para el contenedor del mensaje de error */
#mensajeErrorEdad {
color: #d93025; /* Un rojo de advertencia estándar */
font-size: 14px;
margin-top: 8px;
font-weight: 500;
}
/* Estilo opcional para el botón cuando está deshabilitado */
#botonEnviar:disabled {
opacity: 0.5;
cursor: not-allowed;
}
Lenguaje del código: PHP (php)Este código pondrá el texto de error en rojo y, además, hará que el botón de envío se vea semitransparente y con un cursor de «prohibido» cuando la edad no sea válida.
Conclusión: El poder está en tus manos
¡Lo has conseguido! Ya no dependes de las funcionalidades de un plugin específico para crear formularios dinámicos. Ahora tienes el conocimiento para aplicar esta lógica de cálculo y validación de edad donde quieras y como quieras.
Este es un primer gran paso para entender cómo las piezas fundamentales de la web (HTML, CSS y JavaScript) trabajan juntas. Te animo a que sigas experimentando. ¿Y si en lugar de la edad, calculas los días que faltan para un evento? Las posibilidades son infinitas.
Preguntas frecuentes (FAQ)
¿Cómo cambio el rango de edad? Muy fácil. En la parte superior del código JavaScript, simplemente cambia los valores de las constantes edadMinima y edadMaxima.
¿Y si mi plugin de formularios no me deja añadir un id? La mayoría lo permite, pero si no es el caso, casi todos dejan añadir una clase CSS. Podrías usar clase-fecha en lugar de id="fechaNacimiento". Luego, en el JavaScript, tendrías que cambiar document.getElementById('fechaNacimiento') por document.querySelector('.clase-fecha').
Mi plugin no me deja poner id en el botón de envío, ¿qué hago? No pasa nada. El código seguirá calculando la edad y mostrando el mensaje de error. Lo único que no podrá hacer es deshabilitar el botón visualmente. La validación seguirá funcionando para el usuario.
