Un usuario llenó un formulario, hizo clic en «Enviar» y no ocurrió nada. La página se recargó, los campos se vaciaron, pero no queda claro si el correo se envió realmente.

Contact Form 7 no muestra notificaciones visuales tras el envío de fábrica. Los mensajes de éxito o error quedan ocultos debajo del formulario en texto pequeño, sin animación, sin énfasis. Los usuarios simplemente no los notan y se van sin saber si su envío fue recibido.

Usted puede solucionar esto en 10 minutos. Solo necesita Contact Form 7, cualquier plugin de ventanas emergentes con una API de JavaScript y 25 líneas de código. El resultado: tras el envío del formulario, una ventana grande aparece suavemente sobre la página (verde para éxito, roja para error) y desaparece automáticamente tras un intervalo definido. Sin recarga de página, sin perder clientes potenciales.

💡 Resumen rápido:

• Qué eventos DOM dispara Contact Form 7 y en qué se diferencian los nombres modernos de los heredados
• Cómo crear ventanas emergentes de éxito y error en cualquier plugin de ventanas emergentes de WordPress
• Estilos CSS para las ventanas emergentes: superposición, animación, z-index
• Un script jQuery listo para usar: vinculación de eventos de CF7 con la apertura y cierre automático de ventanas emergentes
• Una alternativa moderna usando addEventListener sin jQuery
• Configuración de la duración de visualización por separado para éxito y error

Qué eventos DOM dispara Contact Form 7

Contact Form 7 genera eventos DOM personalizados en cada etapa del procesamiento del formulario. Esta es la lista completa según la documentación oficial:

Para ventanas emergentes posteriores al envío, usted necesita dos eventos: wpcf7mailsent (éxito) y wpcf7invalid (error de validación). También podría usar wpcf7spam para una ventana de advertencia separada, pero en la práctica los dos primeros son suficientes.

Nota importante: en guías y fragmentos de código antiguos, los eventos se escriben con dos puntos. Por ejemplo, wpcf7:mailsent y wpcf7:invalid. Esta sintaxis se usaba en los hooks jQuery de versiones anteriores de CF7. Hoy todavía funciona por compatibilidad hacia atrás, pero los nombres canónicos no incluyen los dos puntos. En el código a continuación proporcionaré ambas variantes: la moderna usando addEventListener y la variante jQuery para proyectos donde jQuery ya está cargado.

El objeto event.detail contiene propiedades útiles: contactFormId (el ID del formulario específico), pluginVersion (versión de CF7), inputs (arreglo de datos ingresados). Si usted tiene varios formularios en una página, filtre por contactFormId para que la ventana emergente se abra solo para el formulario deseado.

Paso 1: elija un plugin de ventanas emergentes y cree las ventanas

Usted necesita un plugin de ventanas emergentes con una API de JavaScript para que la ventana pueda abrirse programáticamente desde un script. Dos opciones gratuitas probadas del directorio de plugins de WordPress.org:

• Popup Maker, más de 700 000 instalaciones activas, calificación 4.9/5. Llamada: PUM.open(popup_id). Núcleo gratuito potente, segmentación por página, disparadores de tiempo y desplazamiento, integración con formularios populares. La comunidad más grande donde encontrará respuestas a cualquier pregunta.
• WP Popups, más de 20 000 instalaciones activas. Llamada: SPU.show(popup_id). Editor visual basado en Gutenberg, filtros de visualización, soporte para Contact Form 7 de fábrica. Ligero y rápido.

Cree dos ventanas emergentes: una para el envío exitoso y otra para errores. En cada una, coloque una imagen, texto y, opcionalmente, un botón «Cerrar». Anote el ID de cada ventana, ya que los necesitará en el script del paso 3. Los ejemplos a continuación usan los IDs 1068 (éxito) y 1065 (error); los suyos serán diferentes.

Así se ven las ventanas emergentes con los estilos configurados:

Ventana emergente de envío exitoso: fondo verde, icono de confirmación y texto.

Ventana de error: fondo rojo, icono de advertencia y una solicitud para revisar los datos ingresados.

Y aquí están las imágenes para colocar dentro de las ventanas emergentes:

Usted puede reemplazar estas imágenes por las suyas especificando rutas diferentes en los ajustes del plugin de ventanas emergentes.

Paso 2: estilos CSS para las ventanas emergentes

Los plugins de popup no siempre exportan el CSS personalizado. Si los estilos no se aplican después de crear las ventanas, agréguelos manualmente: Ajustes del plugin → CSS personalizado, o Appearance → Customize → Additional CSS.

Estilos para el popup de envío exitoso (superposición verde, z-index máximo):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Estilos para el popup de error (superposición roja):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Lo que sucede aquí: #spu-bg-N es el fondo semitransparente (superposición). #spu-N es la ventana en sí. El z-index alto asegura que el popup cubra todos los elementos de la página, incluida la barra de administración.

Si usa un plugin de popup diferente, reemplace los selectores. Popup Maker genera #pum-N y .pum-overlay[data-popmake*="N"]. WP Popups usa sus propios prefijos; revise el inspector del navegador (F12) para ver los IDs reales de sus ventanas.

Paso 3: Script jQuery que conecta CF7 y los popups

El script puede insertarse de tres maneras: en el functions.php de su tema hijo, mediante el plugin Code Snippets o en la sección de JavaScript personalizado de su tema. Antes de editar functions.php, haga una copia de seguridad; un solo error de sintaxis tirará el sitio.

A continuación el código completo con comentarios. Captura dos eventos de Contact Form 7 y llama a la API del plugin de popup:

1
// START: Contact Form 7 + Popups — popups for success and error
2
jQuery(document).ready(function($) {
3
 
4
    // Popup for validation ERROR (fields empty or invalid)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // Error popup ID — replace with yours
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // auto-close after 5.5 seconds
10
    });
11
 
12
    // Popup for SUCCESSFUL submission
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // Success popup ID — replace with yours
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // auto-close after 3.5 seconds
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Lo que necesita reemplazar para su proyecto:

• SPU.show(N) por el método de su plugin de popup. Para Popup Maker: PUM.open(N).
• 1065 y 1068 por los IDs de sus popups. Encuéntrelos en el panel de administración del plugin.
• El tiempo en setTimeout (milisegundos). 5500 = 5,5 segundos, 3500 = 3,5 segundos. Ajústelo a su preferencia.
• Los selectores div#spu-N y div#spu-bg-N; reemplácelos si su plugin genera IDs diferentes.

Alternativa moderna sin jQuery. Si su tema no carga jQuery o prefiere una opción más ligera, use los eventos nativos de CF7 mediante addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID of specific form (if there are multiple)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Esta variante funciona con Popup Maker y no requiere jQuery. Los eventos wpcf7mailsent y wpcf7invalid (sin los dos puntos) son el estándar moderno.

Si tiene varios formularios en una página, filtre por contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // popup only for form ID=123
4
    }
5
}, false);

Configurar el temporizador de cierre automático

El intervalo para cada popup se define por separado usando el segundo argumento de setTimeout en milisegundos. Recomendaciones prácticas:

• Éxito: de 3 a 5 segundos. El usuario ya leyó «enviado», así que no hace falta retenerlo más tiempo.
• Error: de 5 a 7 segundos. La persona necesita tiempo para procesar el problema, releer el mensaje y entender qué campos corregir.
• Spam (wpcf7spam): de 8 a 10 segundos. Dé tiempo suficiente para leer la advertencia completa, pero no bloquee la página por completo.

El valor 600 en fadeOut(600, 'swing') es la duración de la animación de desvanecimiento en milisegundos. Menos de 400 se ve brusco, más de 800 se siente lento. 600 es el punto justo.

Si tiene varios popups y quiere distintas duraciones para diferentes formularios, envuelva la llamada a setTimeout en una comprobación de contactFormId, como se muestra en el ejemplo anterior.

Video tutorial paso a paso: configurar un popup después del envío de Contact Form 7 desde cero. Si es nuevo en WordPress o prefiere ver en lugar de leer código, estos 8 minutos de pantalla cubren la mitad del artículo.

⁉️🤔 Preguntas frecuentes

La ventana emergente no se abre después del envío del formulario. ¿Qué está mal?

La causa más común: el ID de la ventana emergente no coincide con lo especificado en el script. Vaya al panel de administración de su plugin de ventanas emergentes, encuentre el ID real de la ventana y sustitúyalo en la llamada SPU.show(N) o PUM.open(N). La segunda causa: jQuery no está cargado o está generando conflictos. Revise la consola del navegador (F12 → Consola) en busca de errores. Los plugins de ventanas emergentes asignan nuevos números a las ventanas durante la clonación o importación, mientras que el ID antiguo del fragmento de código permanece; verifique siempre los números después de importar.

¿Tengo que instalar un plugin de ventanas emergentes aparte? ¿Puedo usar simplemente un alert?

Técnicamente sí: reemplace SPU.show(N) con alert('Thank you!') y aparecerá una notificación. Pero el alert bloquea la página, se ve ajeno y molesta a los visitantes. Una ventana emergente personalizada con su diseño, icono y animación suave es parte del sitio, en lugar de un diálogo del sistema del navegador. En nuestra experiencia en varios proyectos, reemplazar el alert por una ventana emergente con la identidad de la marca reduce notablemente la tasa de rebote inmediata.

El código solo funciona para un formulario. ¿Cómo hago para que funcione con varios formularios?

Utilice el filtrado por event.detail.contactFormId. Para la variante con jQuery, envuelva la llamada en una comprobación: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Para JS vanilla, en el paso 3 se proporciona un ejemplo con una condición.

¿Qué pasa si jQuery no está cargado en el sitio?

Utilice la variante con addEventListener del paso 3. No requiere jQuery y funciona en todos los navegadores modernos. El único matiz: cerrar la ventana emergente mediante el DOM nativo se hace ocultando manualmente el elemento, ya que el método fadeOut no está disponible. Como alternativa, añada una clase CSS con transition y altérnela.

¿Puedo usar una sola ventana emergente para todos los formularios del sitio?

Sí, si el texto de la notificación es universal. Cree una ventana emergente de éxito y otra de error, y ábralas para todos los eventos wpcf7mailsent y wpcf7invalid sin filtrar por contactFormId. Sin embargo, si los formularios en diferentes páginas tienen contextos distintos, es mejor crear ventanas separadas. «Solicitud de consulta recibida» y «Suscripción confirmada» se ven diferentes.

Popup Maker o WP Popups: cuál elegir para su proyecto

La elección se reduce a tres escenarios:

• ¿Necesita el máximo de funcionalidades e integraciones? Opte por Popup Maker. Segmentación por páginas, disparadores por tiempo y desplazamiento, integración con docenas de plugins de formularios, una comunidad enorme. El núcleo gratuito cubre el 90% de los casos de uso.
• ¿Busca simplicidad y un editor visual Gutenberg? Su elección es WP Popups. Interfaz moderna, configuración rápida, menos sobrecarga. Funciona con Contact Form 7 desde el primer momento.
• ¿Necesita una ventana emergente con un formulario de Contact Form 7 dentro? Ese es un escenario diferente (no notificaciones tras el envío, sino un formulario en una ventana modal activado por un clic en un botón). Para esto, existe el plugin especializado WPB Popup for Contact Form 7, que abre un formulario de CF7 en una ventana emergente en lugar de reaccionar a su envío.

Ambos plugins de notificación son gratuitos y están disponibles en el directorio de WordPress.org. Elija el que mejor se adapte a su stack y sustituya su llamada API en el script del paso 3. El tema de las ventanas emergentes en sí puede explorarse infinitamente: pruebas A/B del texto de notificación, retrasos basados en el tiempo de lectura, diferentes ventanas para diferentes formularios. Pero la base (evento de CF7 + llamada a la ventana emergente + cierre automático) cubre la gran mayoría de las tareas del mundo real en sitios WordPress.