当您单击引导模式按钮在wordpress小部件内部时，如何打开Ninja Form

编程问答 2022-08-14

问题描述

我正在使用以下内容： 忍者版：3.4.25 / wordpress版本：5.5 / Bootstrap版本：3（或4）

我有一个基于引导程序的wordpress模板，并且正在使用最新的Ninja表单版本。

我在小部件中创建了一个Bootstrap按钮，我想打开一个显示我的Ninja Contact表单的模型窗口。

实际上，我使用旧版本的Ninja表格成功完成了此设置。但是自从最新的更新以来，他们已经更改了所有表单字段名称，因此由于我使用的字段名称不正确，因此现在无法在我的新站点上使用。

如果有人知道现在的旧字段名称是什么：“ ninja_forms_display_form”，那么您不必阅读我的其余文档。我确实尝试过：“ ninja_forms”，但这也不起作用。

我将使用相同的模板，但使用较旧版本的Ninja Forms（3.2.11），提供在其他网站上使用的编码。此模式按钮确实起作用，并且可以在侧边栏的绿色“与我们联系”按钮上看到：www.oasisflighttraining.com.au/about-oasis-flying-school/

以下是使用Bootstrap按钮的侧边栏小部件代码：

<div class="im-centered">
    <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#contactform">Contact Us</button>
</div>

这是创建Bootstrap按钮的代码（在调用wp_footer函数之前，位于我的footer.PHP文件的底部。

<div class="modal fade" id="contactform">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Contact Us</h4>
      </div>
      <div class="modal-body">
        <?PHP 
        
            if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); }           
        
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

引用“ ninja_forms_display_form”的代码在使用最新版本的Ninja Forms的新网站上不起作用。我知道该字段名称已更改，但是我不知道用什么替换它。

有人可以给我一些帮助，弄清楚如何使该引导程序模式按钮与我的Ninja Form一起使用，该Ninja Form是使用具有新字段名称的更新版本创建的吗？

谢谢！

解决方法

较新的Ninja Forms可以使用简码，所以我刚刚更改了此代码：

    <?php 
    
        if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); }           
    
    ?>

对此：

    <?php echo do_shortcode( '[ninja_form id=1]' ); ?>

（作为一项公共服务建议。.只需确保您没有两次插入bootstrap js，否则单击该按钮后模态窗口将不会保持显示。我发现bootstrap shortcode插件添加了另一个bootstrap.js）

bootstrap-modalbuttonbuttonbuttonninja-formstwitter-bootstrapwordpresswordpress