Avisos
Vaciar todo

[Resuelto] Contact Form 7  

 
José
 José
Nuevo usuario

Hola,
Estoy creando un formulario con el plugin contact form 7, en el que el usuario selecciona una fecha.
A partir de esa fecha seleccionada, tengo que crear un campo condicional, en el que aparezca un mensaje si la fecha seleccionada por el usuario es anterior a 1 año a la fecha actual, y por el contrario, que aparezca otro mensaje si la fecha seleccionada por el usuario es posterior a 1 año a la fecha actual.
¿Me podríais decir si existe algún extensión de este plugin para poder hacer ésto. (Ya tengo instalado el plugin de los campos condicionales).
Muchas gracias de antemano, un cordial saludo,
José.

Contenido solo visible a usuarios registrados

Respondido : 05/07/2025 7:25 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Jose,

Prueba agregar esto a tu formulario:

[date* fecha-user placeholder "Selecciona una fecha"]
<div id="fecha-menor-de-un-ano" style="display:none;">
<p>La fecha seleccionada es anterior a un año desde hoy.</p>
</div>
<div id="fecha-mayor-de-un-ano" style="display:none;">
<p>La fecha seleccionada es posterior a un año desde hoy.</p>
</div>

Luego el mensaje no puede mostrarse a menos que agregues un código JavaScript, para ello puedes usar un plugin como WpCode:

https://wordpress.org/plugins/insert-headers-and-footers/

Ingresas en Agregar nuevo código y seleccionas JavaScript:

image

colocas esto:

document.addEventListener('DOMContentLoaded', function () {
const fechaInput = document.querySelector('input[name="fecha-user"]');
const mensajeMenor = document.getElementById('fecha-menor-de-un-ano');
const mensajeMayor = document.getElementById('fecha-mayor-de-un-ano');

function evaluarFecha() {
const valor = fechaInput.value;
if (!valor) return;

const fechaSeleccionada = new Date(valor);
const hoy = new Date();
const haceUnAño = new Date();
haceUnAño.setFullYear(hoy.getFullYear() - 1);

if (fechaSeleccionada < haceUnAño) {
mensajeMenor.style.display = 'block';
mensajeMayor.style.display = 'none';
} else {
mensajeMenor.style.display = 'none';
mensajeMayor.style.display = 'block';
}
}

fechaInput.addEventListener('change', evaluarFecha);
});

Debe quedar asi:

image

Verifica que este igual en las flechas que te indico en la imagen, luego debe funcionar en tu formulario:

image

Un saludo 🖐️ 

Respondido : 05/07/2025 3:45 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

José
 José
Nuevo usuario

Hola,

Muchísimas gracias, me funciona perfectamente.

El caso es que en ese mismo formulario, el usuario tambien tendría que seleccionar otra fecha más, pero en este caso, en vez de 1 año, tienen que ser dos meses ¿Sería mucho pedir que me facilitaráis el código para este otro supuesto de 2 meses, y que sea compatible con el de 1 año en un mismo formulario?

 

Muchas gracias,

José.

Respondido : 05/07/2025 11:16 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Jose,

Puedes verificar si con este te funciona:

[date* fecha-user placeholder "Fecha 1 (para validar 1 año)"]


<div id="fecha-menor-de-un-ano" style="display:none;">
<p>La primera fecha es anterior a un año desde hoy.</p>
</div>

<div id="fecha-mayor-de-un-ano" style="display:none;">
<p>La primera fecha es posterior a un año desde hoy.</p>
</div>

[date* fecha-dosmeses placeholder "Fecha 2 (para validar 2 meses)"]


<div id="fecha-menor-de-dos-meses" style="display:none;">
<p>La segunda fecha es anterior a 2 meses desde hoy.</p>
</div>

<div id="fecha-mayor-de-dos-meses" style="display:none;">
<p>La segunda fecha es posterior a 2 meses desde hoy.</p>
</div>

Este seria el que agregas en tu formulario, puedes ver que esta separado por dos secciones, ahor el codigo que vas a cambiar en el plugin de wp code:

<script>
document.addEventListener('DOMContentLoaded', function () {
// Función genérica para ocultar/mostrar según comparación de fecha
function evaluarFecha({ inputName, umbralMeses, menorID, mayorID }) {
const input = document.querySelector(`input[name="${inputName}"]`);
const menor = document.getElementById(menorID);
const mayor = document.getElementById(mayorID);

if (!input) return;

input.addEventListener('change', () => {
const valor = input.value;
if (!valor) return;

const fechaSeleccionada = new Date(valor);
const hoy = new Date();
const fechaLimite = new Date();

fechaLimite.setMonth(hoy.getMonth() - umbralMeses);

if (fechaSeleccionada < fechaLimite) {
menor.style.display = 'block';
mayor.style.display = 'none';
} else {
menor.style.display = 'none';
mayor.style.display = 'block';
}
});
}

// Llamadas para cada campo de fecha
evaluarFecha({
inputName: 'fecha-user',
umbralMeses: 12, // 1 año = 12 meses
menorID: 'fecha-menor-de-un-ano',
mayorID: 'fecha-mayor-de-un-ano'
});

evaluarFecha({
inputName: 'fecha-dosmeses',
umbralMeses: 2,
menorID: 'fecha-menor-de-dos-meses',
mayorID: 'fecha-mayor-de-dos-meses'
});
});
</script>

Verifica con esto y nos comentas.

Un saludo 🖐️ 

Respondido : 06/07/2025 3:36 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

José
 José
Nuevo usuario

Ésto es justo lo que quería, funciona perfectamente. Muchísimas gracias.

Respondido : 06/07/2025 8:11 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Jose,

Nos ayudaría en gran medida que nos valorases en este mensaje, puedes encontrar un botón para ello, igualmente quedamos atentos por si tienes alguna otra duda, recuerda que puedes crear un nuevo tema y con gusto lo vemos.

Un saludo 🖐️ 

Respondido : 07/07/2025 4:41 am

Cursos Gratuitos WordPress