使 Contact Form 7 触发引导模式

Posted 2023-05-08

【中文标题】使 Contact Form 7 触发引导模式

【英文标题】：Make Contact Form 7 trigger a bootstrap modal

【发布时间】：2013-12-17 19:53:24

【问题描述】：

我有一个基于 Bootstrap 的主题，我希望 Contact Form 7 的成功消息触发 Bootstrap Modal（即“弹出窗口”）。

我尝试在我的页面上添加模态示例代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </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><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

我认为将以下字符串放在联系表 7 的“附加设置”中会起作用：

on_sent_ok: "$('#myModal').modal(options)"

不幸的是，这不会产生任何可见的效果。只是正常的成功消息似乎被抑制了（它没有显示）。

我将不胜感激有关该主题的任何想法，因为它似乎没有在任何地方出现。

【问题讨论】：

您知道是否发生了 javascript 错误吗？在 chrome 中按 F12 检查开发者控制台

【参考方案1】：

hmm，在我看到人们使用 jQuery() 的其他示例中，“选项”参数也可能未定义。试试这个：

 on_sent_ok: "jQuery('#myModal').modal()"

【讨论】：

就是这样！非常感谢！

【参考方案2】：

注意：on_sent_ok 和 on_submit 已从 Contact Form 7 5.0 中删除 officially。您可以使用 DOM 事件来代替这些设置。

【参考方案3】：

将此代码放在function.php中，用于在表单提交后显示一个模式。请记住设置您的表单 ID。

 <?php add_action( 'wp_footer', 'mycustom_wp_footer' );
    function mycustom_wp_footer()  ?>
     <script type="text/javascript">
         document.addEventListener( 'wpcf7mailsent', function( event ) 
         if ( '34' == event.detail.contactFormId )  // Change 123 to the ID of the form 
         jQuery('#myModal').modal('show'); //this is the bootstrap modal popup id
       
        , false );
         </script>
       <?php   ?>