Llamar a una función de JavaScript en el envío del formulario de contacto 7

Estoy usando el formulario de contacto 7 en WordPress, con Skin Beauty como tema. Lo que quiero hacer es llamar a una función de JavaScript específica cuando se envía el formulario que creé.

En mi código HTML estoy creando un formulario como este:

<form onsubmit="checkvalue()">
...
</form>

Y al final del cuerpo de mi código HTML, estoy creando una función de JavaScript con la validación que quiero hacer en el formulario:

<script language="JavaScript" type="text/javascript">
   function checkvalue() {
   ...
   }
</script>

Probé el código en otro tema (Twenty Thirteen) – con Contact Form 7 – y lo raro es que no hubo problema ahí.

¿Alguien puede decirme por qué funciona correctamente en el tema Twenty Thirteen, pero con Skin Beauty no? ¿Hay alguna manera de que pueda usar mi función de JavaScript con mi formulario? onsubmit?

La respuesta aprobada ahora ha quedado obsoleta por razones de seguridad/vulnerabilidades potenciales en el código sobre el que el autor del Formulario de contacto 7 no tiene control. Más detalles aquí: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

En su lugar, debe interceptar el evento DOM wpcf7submit, cuyos detalles están aquí: https://contactform7.com/dom-events/

En su ejemplo específico, busque la identificación de su formulario, que es la identificación en el código abreviado. Imaginemos que ese número es 123 (aunque probablemente no lo sea).

document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        alert( "The contact form ID is 123." );
        // do something productive
    }
}, false );

según el ejemplo anterior. Hay dos problemas: en primer lugar, no puedo ver dónde se pasan los valores del formulario a este oyente y sospecho que es posible que ya no estén visibles en este punto. Esto se debe a que (segundo problema) este evento se activa DESPUÉS del envío y debe ejecutar sus eventos ANTES del envío, por lo que el evento onsubmit probablemente no sea el activador apropiado. El envío del formulario ocurre después de hacer clic en el botón “enviar”. La respuesta aprobada aquí: el evento de envío de llamada del formulario de contacto 7 en jQuery intercepta el DOM en el punto donde se hace clic en el botón, antes de que se envíe todo el formulario. Este es el enfoque que tomaría.

Recuerde que puede agregar el oyente en functions.php de esta manera:

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        var wpcf7Elm = document.querySelector( '.wpcf7' );

        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            alert( "Fire!" );
        }, false );
    </script>
    <?php
}

Si está buscando hacer algo antes de enviar, puede usar la función jQuery Submit(). Según la documentación de jQuery, “Esto sucede antes del envío real”. Debe adjuntarlo al elemento de formulario, no al botón.

$('.wpcf7-form').submit(function() {
    //your code here
});

Agregué la función javascript al final de la pie de página.php expediente:

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
  //Your code here
  }, false );
</script>

Esto funcionará solo si tiene un solo formulario dentro de su sitio web:

EDITAR: esta respuesta ahora está desactualizada ya que las opciones a las que se hace referencia han quedado obsoletas (y eliminadas). Consulte la respuesta de Simon para conocer el último método.

No estoy seguro acerca de Twenty Thirteen, pero la forma correcta de llamar a una función en el envío del formulario con el Formulario de contacto 7 es agregando el on_submit opción en el Ajustes adicionales sección de su formulario.

Esto garantizará que su código se conecte correctamente a las rutinas de Contact Form 7 y se llamará en el momento adecuado.

Esto es lo que parece:

Puede incluir uno o ambos de estos ajustes adicionales.

Según la documentación:

si configuras on_sent_ok: seguido de un código JavaScript de una línea, puede indicarle al formulario de contacto el código que debe ejecutarse cuando el correo se envíe correctamente. Así mismo, con on_submit:puede indicar el código que debe ejecutarse cuando se envía el formulario, independientemente del resultado.

Por favor, tenga en cuenta también no debería estar creando su propia <form> etiqueta. Contact Form 7 hace esto por usted cuando incluye el formulario a través de su código abreviado (p. [contact-form-7 id="10"]) y crear su propia etiqueta tendrá consecuencias no deseadas.

Dado que está interesado en la validación, también puede leer sobre el Formulario de contacto 7 opciones de validación del lado del servidor conectables (aunque sé que está tratando de hacer una validación del lado del cliente en este caso).