在 Contact Form 7 提交上关闭 Bootstrap Modal

Question

在 Bootstrap 模式中，我有一个 Contact Form 7。我无法在发送邮件后关闭模态。您要做的是转到表单的 "action" 属性的 link。我无法删除动态创建的 "action" 属性。也许一个解决方案是使用 "event.preventDefault ()" 和 "on_sent_ok"。但不是如何。

Working Example

点击一个便笺，然后点击 Compartir ，然后点击 Mail icon

Answer 1

我用这段代码找到了解决方案。提交表单时，模态框会在 1 秒后关闭。

j(".form-horizontal").live("submit", function(){
        j.post(this.action, j(this).serialize(), function(){
            //this callback is executed upon success full form submission close modal here

        }, "script");
     //this is to wait 1 second until close
        setTimeout(function() {j('.modal').modal('hide');}, 1000);          
        return false;
    });

Answer 2

不，我将代码放在模态中。仅 <?php echo do_shortcode( '[the contact form 7 shortcode]' ); ?> 在模态正文中。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <?php echo do_shortcode( '[the contact form 7 shortcode]' ); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 3

我的解决方案，我在提交按钮点击事件上也有 bootstrap 按钮。

on_sent_ok: "setTimeout("$('button.submit').prop('disabled', null).button('reset'); $('.modal').modal('hide');", 3000); 
ga('send', 'event', 'Купить быстро', 'Submit');"

此代码应放在编辑联系表单页面的其他设置选项卡中

Answer 4

将此代码粘贴到您的 functions.php

add_action( 'wp_footer', 'submit_cf7' );
function submit_cf7() {
    ?>
    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            if ( event.detail.contactFormId == '36' ) {
                setTimeout(function(){
                    jQuery('#contactModal').modal('hide');
                }, 2000);
            }
        }, false );
    </script>
    <?php
}

其中 36 - 您的表单 ID。模态 window 将在 2 秒后关闭

在 Contact Form 7 提交上关闭 Bootstrap Modal

Close Boostrap Modal on Contact Form 7 submit

jquery

contact-form-7

bootstrap-modal