javascript - 特定联系人 7 表单的目标 wpcf7mailsent

Question

我正在使用 Wordpress 和 Contact Form 7。我希望用户能够填写表格，并在成功提交后下载文件。我正在使用 javascript 来定位 wpcf7mailsent 事件，然后该事件会定向到该文件。我强制将 pdf 下载到 .htaccess 文件中。

一切正常，但是我在页面上有多个表单，并且只希望将此逻辑应用于一个特定的 contact 7 表单。我怎样才能让它工作。这是我希望发生这种情况的表单的 HTML 和 JS 输出:

<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>

Answer 1

如您所见，该事件与特定表单无关，因此您无法为特定表单触发它。顺便说一下，您可以在函数内添加一些逻辑来测试正在使用的是哪种形式。

为此，您可以使用 event 对象。如您所见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.

还有

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.

您可以添加 if else 语句以测试您已在表单中指定的特定属性(Id、隐藏输入等)

---

在这种情况下，您可以通过执行以下操作来使用表单 3112 的 ID:

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

如果您不确定要使用的ID，您可以在提交表单时添加一个console.log来查看内容，您将获得ID和其他信息:

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