En este tutorial, aprenderemos cómo utilizar instancias de Bootstrap y eventos DOM personalizados en Contact Form 7 para controlar la aparición y desaparición de un modal después de enviar un formulario con éxito. También, destacaremos la importancia de crear instancias de Bootstrap correctamente.
Requisitos Previos
Asegúrate de tener lo siguiente antes de continuar:
- Un sitio web de WordPress con el complemento Contact Form 7 instalado y configurado.
- La biblioteca Bootstrap 5 incluida en tu sitio web.
Paso 1: Configuración del Formulario
Primero, asegúrate de que tienes un formulario de Contact Form 7 configurado en tu sitio web. Puedes utilizar el siguiente shortcode como ejemplo:
Error: No se encontró ningún formulario de contacto.
Asegúrate de reemplazar "tu-id-de-formulario" con el ID de tu formulario real.
Paso 2: Crear un Script JavaScript
Crea un archivo JavaScript que contenga el siguiente código:
document.addEventListener('wpcf7mailsent', function (event) {
setTimeout(function () {
var modalElement = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getInstance(modalElement);
if (!modal) {
modal = new bootstrap.Modal(modalElement);
}
// Luego, puedes usar modal para mostrar, ocultar o interactuar con el modal
modal.hide(); // Ejemplo: ocultar el modal
}, 2000); // Ajusta el tiempo de espera según tus necesidades
}, false);
Este código se ejecutará cuando se envíe con éxito el formulario y se dispare el evento wpcf7mailsent. La función setTimeout permite esperar un breve período (2 segundos en este caso) antes de ocultar el modal.
Paso 3: Agregar el Script al Sitio Web
Agrega el archivo JavaScript creado en el paso anterior a tu sitio web. Puedes hacerlo de varias maneras, como a través del administrador de WordPress o en el archivo de tu tema personalizado. Asegúrate de que el script se cargue en las páginas donde necesitas esta funcionalidad.
Paso 4: Prueba tu Formulario
Finalmente, prueba tu formulario enviándolo con éxito. Deberías ver que el modal se oculta automáticamente después de dos segundos. Puedes elegir utilizar la opción que mejor se adapte a tus necesidades.
Conclusión
En este tutorial, aprendiste a utilizar instancias de Bootstrap y eventos DOM personalizados en Contact Form 7 para controlar la aparición y desaparición de un modal después de enviar un formulario con éxito. También, exploramos una opción alternativa que verifica el contenido de respuesta del formulario.
¡Ahora tienes dos soluciones efectivas para manejar modales en Contact Form 7 y podrás elegir la que mejor se adapte a tus necesidades!
Opción Alternativa: Verificar el Contenido de Respuesta
Si prefieres una opción alternativa, puedes utilizar el siguiente script para verificar el contenido de respuesta del formulario y ocultar el modal cuando aparece la palabra “Gracias”:
document.addEventListener('DOMContentLoaded', function () {
// Encuentra el botón de "Enviar" del formulario
var submitButton = document.querySelector('.wpcf7-submit');
if (submitButton) {
submitButton.addEventListener('click', function (event) {
setTimeout(function () {
// Busca el elemento de respuesta después de un breve retraso
var responseOutput = document.querySelector('.wpcf7-response-output');
// Comprueba si el contenido del elemento de respuesta contiene la palabra "Gracias"
if (responseOutput && responseOutput.textContent.trim().indexOf('Gracias') !== -1) {
setTimeout(function () {
var modalElement = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getInstance(modalElement);
if (!modal) {
modal = new bootstrap.Modal(modalElement);
}
// Luego, puedes usar modal para mostrar, ocultar o interactuar con el modal
modal.hide(); // Ejemplo: ocultar el modal
}, 2000); // Ajusta el tiempo de espera según tus necesidades
}
}, 1000);
});
}
});
Este tutorial te ayudará a recordar cómo implementar esta funcionalidad en tu sitio web y a comprender el uso de eventos DOM personalizados de Contact Form 7 junto con Bootstrap. Siéntete libre de personalizar y ampliar este tutorial según tus necesidades. ¡Buena suerte con tu proyecto!