Calling a JavaScript function on Contact Form 7 submission

0 Views

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:

Read More
<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?

Post Views: 0

Related posts

Leave a Reply

4 comments

  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
}

  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
});

  3. I added the javascript function at the end of the footer.php file:

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

    This will work only if you have a single form within your website:

  4. EDIT: This answer is now out-of-date as the options referred to have been deprecated (and removed). See Simon’s answer for the latest method.

    I’m not sure about Twenty Thirteen, but the correct way to call a function on the submission of the form with Contact Form 7 is by adding the on_submit option in the Additional Settings section of your form.

    This will ensure your code is appropriately hooked in to Contact Form 7’s routines and will be called at the right time.

    Here’s what it looks like:

    enter image description here

    You can include either one, or both, of these additional settings.

    As per the documentation:

    If you set on_sent_ok: followed by a one-line JavaScript code, you can tell the contact form the code that should be performed when the mail is sent successfully. Likewise, with on_submit:, you can tell the code that should be performed when the form submitted regardless of the outcome.

    Please also note you shouldn’t be creating your own <form> tag. Contact Form 7 does this for you when you include the form via its shortcode (eg. [contact-form-7 id="10"]) and creating your own tag will have unintended consequences.

    Since you’re interested in validation, you may also like to read up about Contact Form 7’s pluggable server-side validation options (although I know you’re trying to do client-side validation in this case).