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

在您的情况下，您可以通过执行以下操作来使用表单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

尝试此代码，您可以通过表单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>
}

Answer 3

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

定位特定联系人7表单的wpcf7mailsent

3 个答案: