javascript - additional - contact form 7 ajax

Formulario de contacto 7 devolución de llamada AJAX

Question

He estado buscando en esto por un tiempo y no puedo encontrar ninguna documentación para delinear lo que quiero lograr.

Estoy usando WordPress y el plugin Contact Form 7, todo funciona perfectamente, lo que quiero lograr es ejecutar JavaScript en particular al enviar el formulario, sé que podemos usar "on_sent_ok:" en la configuración adicional, pero esto solo funciona si el formulario está realmente enviado.

Lo que me gustaría hacer es hacer algún otro javascript cuando el formulario no se envíe correctamente, lo que lleva al usuario a la sección que no validó.

Puedo usar el siguiente código para ejecutar después de 1.7s del formulario enviado, sin embargo, es un poco descuidado, como si el usuario se estuviera ejecutando con una conexión lenta, existe la posibilidad de que esto se ejecute antes de que el formulario se envíe correctamente.

 $(''.wpcf7-submit'').click(function() {
setTimeout(function() {
    if ($(''.fs1 input,.fs1 textarea'').hasClass(''wpcf7-not-valid'')) {
        $(''.pop-up-form'').removeClass(''pustep2'').removeClass(''pu-closing'');
        $(''.form-step'').hide();
        $(''.fs1'').show();

    }
    if ($(''.fs2 *'').hasClass(''wpcf7-not-valid'')) {
        alert(''error on page 2 - take user back to the area with issues'')
    }
}, 1700);
});

¿Hay alguna función o gancho particular que pueda usar para ejecutar JS cuando el formulario AJAX se haya completado?

¡Gracias!

Answer 1

A veces puede no funcionar, como señaló Martin Klasson , solo el evento ''enviar'' funciona, lo más probable es que se active por una forma y burbujee hasta el objeto seleccionado. Además, como puedo entender, ahora los eventos tienen otros nombres, como "invalid.wpcf7", "mailsent.wpcf7", etc. En resumen, esto debería funcionar:

jQuery(''.wpcf7'').on(''invalid.wpcf7'', function(e) {
    // your code here
});

Explicación más detallada aquí: ¿Cómo agregar configuraciones adicionales al error en el formulario de contacto 7?

Answer 2

Dada la variedad de respuestas sobre este tema, el desarrollador de complementos parece cambiar de opinión acerca de cómo debería funcionar cada 5 minutos. Actualmente (Q1 2017) este es el método de trabajo:

document.addEventListener( ''wpcf7mailsent'', function( event ) {
  alert( "Fire!" );
}, false );

Y los eventos válidos son:

• wpcf7invalid : se activa cuando un envío de formulario Ajax se ha completado correctamente, pero no se ha enviado el correo porque hay campos con entradas no válidas.
• wpcf7spam : se activa cuando un envío de formulario Ajax se ha completado correctamente, pero no se ha enviado el correo porque se ha detectado una posible actividad de spam.
• wpcf7mailsent : se activa cuando un envío de formulario Ajax se ha completado correctamente y se ha enviado el correo.
• wpcf7mailfailed : se activa cuando un envío de formulario Ajax se ha completado correctamente, pero no se pudo enviar el correo.
• wpcf7submit : se activa cuando un envío de formulario Ajax se ha completado con éxito, independientemente de otros incidentes.

Sauce: https://contactform7.com/dom-events/

Answer 3

En la versión 3.3, se introdujeron nuevos desencadenantes de eventos personalizados jQuery:

Nuevo: introduzca 5 nuevos desencadenantes de eventos personalizados de jQuery

• wpcf7: no válido
• wpcf7: spam
• wpcf7: mailsent
• wpcf7: mailfailed
• wpcf7: enviar

Puede usar wpcf7:invalid como en el siguiente ejemplo:

$(".wpcf7").on(''wpcf7:invalid'', function(event){
  // Your code here
});

Answer 4

Ya tuve bastante, y descubrí que cuando solo funciona el evento Submit , significa que hay un problema / conflicto js en el tema.

Si se trata de un tema personalizado que ha creado, asegúrese de que tanto jQuery como jQuery migrate estén cargados, en este orden, y que el formulario de contacto 7 js también esté cargado en el pie de página.

Asegúrate de tener wp_head y wp_footer en tus plantillas php.

Para que los eventos DOM funcionen, tu formulario debe estar en modo Ajax. Si la página se vuelve a cargar al momento del envío, olvídate de los eventos DOM. Si tiene el ID del formulario en la URL, lo mismo. Mi formulario inicialmente no estaba en modo Ajax porque el formulario de contacto JS no estaba cargado y jQuery Migrate tampoco.

El formulario debe comportarse exactamente como se muestra en esta página para que los eventos DOM se activen correctamente. Una vez que tienes eso, debería estar funcionando.

He probado esto con jQuery 3.3.1 y Migrate 3.0.1 y el siguiente detector de eventos funcionó:

document.addEventListener( ''wpcf7mailsent'', function( event ) {
    console.log(''mail sent OK'');
    // Stuff
}, false ); 

Para comprobar si tu tema es el culpable, prueba tu formulario con el tema predeterminado de Wordpress, si funciona, sabes que el problema está en tu parte y no tanto en el documento del desarrollador.