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

Question

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

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

通过目标联系人表单的

用户输入数据将作为事件对象的detail.inputs属性传递给事件处理程序。detail.inputs的数据结构是一个对象数组，每个对象都有name和value属性。

而且还

事件对象的可用属性：

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

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来区分表单...并且您可以使用更多的其他if条件

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