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

Question

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

这一切都很好，但是我在页面上有多个表单，并且只希望此逻辑适用于一个特定的联系人 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：

通过目标联系表单的用户输入数据被传递给事件 handler 作为事件对象的 detail.inputs 属性。数据 detail.inputs 的结构是一个对象数组，每个对象都有 名称和值属性。

还有

事件对象的可用属性：

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、隐藏输入等）

---

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

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

Answer 2

//Add this code in child theme functions.php 
function cf7_footer_script(){ ?>
    document.addEventListener( 'wpcf7mailsent', function( event ) {     
        if(event.detail.contactFormId == '906') { 
            window.open( 'YOUR URL HERE', 'download' ); 
        } 
    }, false );
<?php }
add_action('wp_footer', 'cf7_footer_script');

Answer 3

试试这个代码你可以通过他们的表单ID来区分表单......如果条件你可以使用更多的其他

   add_action( 'wp_footer', 'redirect_page' );

    function redirect_page()
    {
    <script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        if ( '111' == event.detail.contactFormId ) {
            location = 'your-url1';
        } else if ('222' == event.detail.contactFormId) {
            location = 'your-url2';
        }
    }, false );
</script>
}