Evento activador de validación del formulario de contacto 7

3 minutos de lectura

Cuando el usuario hace clic en el botón Enviar para el formulario de contacto 7, quiero que la página se desplace a la sección del mensaje de validación.

Mi acercamiento:

estoy usando jQuery on click evento para el botón de envío y haga clic en el desplazamiento de la página a la sección de mensaje de validación.

Estoy seguro de que no es correcto. Porque al hacer clic se desplaza a la sección pero el mensaje aún no ha llegado a través de ajax.

Entonces, ¿hay alguna manera de crear un evento cuando se realiza la validación en el formulario de contacto 7 y usarlo para desplazarse hacia abajo?

  • puede usar la función setTimeout de js @MarkWilson

    – Parth Mahida

    11 de noviembre de 2016 a las 7:39

  • eso no será correcto. El tiempo puede variar para enviar el formulario

    – Marcos Wilson

    11 de noviembre de 2016 a las 8:03


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

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

Y los eventos válidos son:

  • wpcf7inválido — Se activa cuando el envío de un formulario Ajax se ha completado correctamente, pero el correo no se ha enviado porque hay campos con entradas no válidas.
  • wpcf7spam — Se activa cuando el envío de un formulario Ajax se completó correctamente, pero el correo no se envió porque se detectó una posible actividad de correo no deseado.
  • wpcf7correo enviado — Se activa cuando el envío de un formulario Ajax se ha completado correctamente y se ha enviado el correo.
  • wpcf7mailfalló — Se activa cuando el envío de un formulario Ajax se completó con éxito, pero no se pudo enviar el correo.
  • wpcf7enviar — Se activa cuando el envío de un formulario Ajax se completa con éxito, independientemente de otros incidentes.

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

  • funciona perfecto, y controla a los oyentes por separado genio 😀

    –Rodrigo Zuluaga

    12 de junio de 2018 a las 17:06

Activadores del formulario de contacto 7 wpcf7:invalid en este caso. Puedes usar este disparador:

$(window).on('wpcf7:invalid', function() {
    // let's scroll
});

Fuente: https://github.com/wp-plugins/contact-form-7/blob/master/includes/js/scripts.js (Línea: 109)

  • No, no trabajo aquí. Ninguno de estos activadores de eventos funciona, en absoluto, y están completamente sin documentar.

    – Nathan Hornby

    21 de marzo de 2017 a las 11:01


  • Como puede ver en el código fuente (en mi opinión, la mejor documentación) vinculado anteriormente en la línea 109, el disparador todavía está allí. Todavía debería funcionar.

    –Andy Tschiersch

    22 de marzo de 2017 a las 12:58

  • extraño: no pude hacer que este formato funcionara en absoluto. Tuve que usar los eventos DOM que se ven aquí: contactform7.com/dom-eventos. El código fuente es documentación de la misma manera que mirar una caja abierta de Ikea son instrucciones 😉

    – Nathan Hornby

    23 de marzo de 2017 a las 11:20


Esto también hace el trabajo. Si alguien está interesado.

$('.wpcf7-form').ajaxComplete( function(){    
      if($(this).hasClass('invalid') || $(this).hasClass('sent')){
            $('.forkit-curtain').animate({
                scrollTop: $(".wpcf7-response-output").first().offset().top + 100
            }, 2000);
      }
    });

¿Ha sido útil esta solución?