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

我使用Wordpress和联系方式7。我希望用户能够填写一份表格，并在成功提交文件后将下载。Im使用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>

下载小册子
请填写下表下载小册子





document.addEventListener（'wpcf7mailsent'，函数（事件）{
//地点：http://excel-homes.design-image.co.uk/wp-content/uploads/2017/10/BigNeat.pdf';
}，假）；
document.addEventListener（'wpcf7mailsent'，函数（事件）{
地点=''；
}，假）；

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

为此，您可以使用

事件

对象。正如你所看到的：

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

而且

事件对象的可用属性：

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

---

在您的情况下，您可以通过以下操作使用表单的ID

3112

：

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

如果您不确定要使用的ID，可以在提交表单时添加

控制台.log

以查看内容，您将获得ID和其他信息：

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

---

试试这段代码，你可以通过他们的表单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>
}

add_操作（'wp_footer'，'redirect_page'）；
函数重定向_页面（）
{
document.addEventListener（'wpcf7mailsent'，函数（事件）{
如果（'111'==event.detail.contactFormId）{
位置='your-url1'；
}else if（'222'==event.detail.contactFormId）{
位置='your-url2'；
}
}，假）；
}

//在child theme functions.php中添加此代码
函数cf7\u footer\u script（）{？>
addEventListener（'wpcf7mailsent'，函数（事件）{
如果（event.detail.contactFormId=='906'）{
window.open（'yourlurl HERE'，'download'）；
} 
}，假）；
你能告诉我这是什么样子吗？恐怕我的JS技能有限。谢谢，这不起作用，但我看看能不能解决why@WebblyBrown尝试添加console.log，正如我所展示的那样，查看输出Hanks对于这一点非常有用的建议，您今天为我节省了时间。您的答案与已经专业的答案有什么区别看了一个？没什么不同。但我当时没有看到那个代码…我在使用这个代码，所以就把它粘贴在这里。没什么不同。你可以解释代码的情况，这样OP就能理解你真正想要表达的内容。
   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>
}

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