Target wpcf7mailsent of a specific contact 7 form

Question

Im using Wordpress and Contact Form 7. I would like the user to be able to fill out a form, and after successful submit a file will download. Im using javascript to target the wpcf7mailsent event, which then directs to the file. Im forcing the pdf to download in the .htaccess file.

This all works fine, however I have multiple forms on the page, and only want this logic to apply to one specific contact 7 form. How can I get that to work. Here is the output for the HTML and JS for the form I wish this to happen on:

<section id="downloads"><span class="text">Download Brochure</span>
  <div class="brochure-form">
    <div class="container">
      <div><p>Please fill out the form below to download the brochure</p>
</div>
 <div role="form" class="wpcf7" id="wpcf7-f3112-o2" lang="en-GB" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/developments/sonas/#wpcf7-f3112-o2" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="3112" />
<input type="hidden" name="_wpcf7_version" value="4.9" />
<input type="hidden" name="_wpcf7_locale" value="en_GB" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f3112-o2" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
</div>
<p><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Your name" /></span>  </p>
<p><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Your Email" /></span> </p>
<p><span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Your Telephone" /></span> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div><script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    //location = 'http://excel-homes.design-image.co.uk/wp-content/uploads/2017/10/BigNeat.pdf';
}, false );
</script>
</div>
</div>
</section> 

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = '<?php the_field('download_brochure'); ?>';
}, false );
</script>

Solution

As you can notice the event is not related to a specific form so you cannot make it triggered for a specific form. By the way you can add some logic inside the function to test which form is being used.

To do that you may use the event object. As you can read here :

User input data through the target contact form is passed to the event handler as the detail.inputs property of the event object. The data structure of detail.inputs is an array of objects, and each object has name and value properties.

and also

Available properties of the event object :

PROPERTY                      DESCRIPTION
detail.contactFormId          The ID of the contact form.
detail.pluginVersion          The version of Contact Form 7 plugin.
detail.contactFormLocale      The locale code of the contact form.
detail.unitTag                The unit-tag of the contact form.
detail.containerPostId        The ID of the post that the contact form is placed in.

You can add an if else statement in order to test a specific property you already specified in your form (an Id, a hidden input, etc)

---

In you case you may use the ID of your form 3112 by doing something like this :

document.addEventListener( 'wpcf7mailsent', function( event ) {
    if(event.detail.contactFormId == '3112') {
    //put your code here 
    }
}, false );

If you are not sure about the ID to use, you may add a console.log to see the content while submitting the form and you will get the ID and the other informations:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log(event.detail)
}, false );

Comments

[Webbly Brown]

Would you be able to show me what this would look like? my JS skills are limited im afraid.

[Webbly Brown]

Thanks, this isnt working, but ill see if can work out why

[Temani Afif]

@WebblyBrown try to add the console.log as i show to see the output

[Temani Afif]

what is the difference between your answer and the already provided one?

[Krish Gajera]

nothing different. but i didn't saw that code that time... m using this code so just paste it here. nothing difference.

[Victor Sokoliuk]

Thanks for this a bit of really useful advice, you saved me time today.

[noobprogrammer]

You can explain what's going on with your code so that OP understands what you really want to convey.