Calling a JavaScript function on Contact Form 7 submission

Question

I'm using Contact Form 7 in Wordpress, with Skin Beauty as the theme. What I want to do is to call a specific JavaScript function when the form I created is submited.

In my HTML code I am creating a form like this:

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

And at the end of the body of my HTML code, I am creating a JavaScript function with the validation I want to do on the form:

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

I tried the code in another theme (Twenty Thirteen) - with Contact Form 7 - and the weird thing is that there was no problem there.

Can anybody tell me why it runs correctly on the Twenty Thirteen theme, but with Skin Beauty it doesn't? Is there any way I can use my JavaScript function with my form's onsubmit?

Answer 1

The approved answer has now been deprecated for reasons of security / potential vulnerabilities in code the author of Contact Form 7 has no control over. More details here: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Instead you need to intercept the DOM Event wpcf7submit - details for which are here: https://contactform7.com/dom-events/

In your specific example, find the id of your form which is the ID in the shortcode. Let's imagine that number is 123 (although it probably isn't).

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

as per the example above. There are two issues - firstly I can't see where the form values get passed to this listener and I suspect they may no longer be visible by this point. That's because (second issue) this event gets fired AFTER submission and you need to have your events run BEFORE submission, so the onsubmit event probably isn't the appropriate trigger. Submission of the form happens after the "submit" button is clicked. The approved answer here: Contact form 7 call submit event in jQuery intercepts the DOM at the point where the button is clicked, prior to the whole form being submitted. This is the approach I would take.

Remember you can add the listener into functions.php like this:

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
}

Answer 2

If you are looking to do something before submit, you can use the jQuery Submit() function. Per jQuery documentation, "This happens prior to the actual submission". You need to attach it to the form element, not the button.

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