带有重力形式的 Wordpress 中的 Bootstrap 模态

Posted 2023-02-19

【中文标题】带有重力形式的 Wordpress 中的 Bootstrap 模态

【英文标题】：Bootstrap Modal in Wordpress With Gravity Form

【发布时间】：2015-05-25 22:59:00

【问题描述】：

我在 Wordpress 网站上有一个页面，该页面带有一个 Bootstrap 模态，当单击图形时会出现该模态，并且模态内部有一个重力表单。首次加载页面时，模式中的重力表单代码导致我的一些导航链接不起作用。我相当确定它是调用重力表单（通过调用它的短代码）和引导模式窗口的 php 代码的组合，因为当我从模式中删除重力表单 php 代码或删除模式代码并只显示页面上的表单导航链接正常工作。

知道为什么在 Bootstrap 模式中使用重力形式会导致 Wordpress 导航不起作用吗？

这是带有代码的网站：http://www.stlmaa.com/

这里是按钮图形代码：

<img src="<?php bloginfo('template_directory'); ?>/images/questions.png"  data-toggle="modal" data-target="#myModal" style="cursor: pointer"/>

这里是模态代码：

<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-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel" style="color:black">Contact Us!</h4>
</div>
<div class="modal-body" style="color: black; padding-top:-20px">
<?php echo do_shortcode('[gravityform id=1 name=ContactUs title=false description=false]'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

【问题讨论】：

有人可以帮忙吗？

【参考方案1】：

我不完全确定您所说的“导航问题”是什么意思。网站上关于导航的一切似乎都很好，所以我猜你已经解决了这部分问题。

如果不是，并且您提到模态在提交时如何关闭，我建议您在短代码中添加一个额外的 ajax 属性，以便表单保持打开状态。这将确保您的用户知道所有适当的字段都已填写，并为他们提供确认。您还想删除“名称”字段；只需确保您在表单 ID 中有正确的数字即可。它应该是这样的：

<?php echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]'); ?>

来源：https://www.gravityhelp.com/documentation/article/embedding-a-form/

这能解决您的问题吗？

【参考方案2】：

我知道这篇文章已经过时了，但它已在 Google 中被编入索引，所以以防万一其他人在您的搜索过程中遇到这个......

您确实需要使用 ajax，否则提交表单将关闭模式并将您重定向到新页面。

但是；阻止模式关闭更改不是使用嵌入的短代码（实际上您应该使用该函数，而不是使用@ahurleb 发布的相同 URL 的短代码），而是使用引导选项值进行更改。您可以使表单保持不变，并将另一个按钮设置为手动关闭或在模式边界外单击时关闭。

有关正确嵌入重力形式的功能，请参见此处：https://docs.gravityforms.com/adding-a-form-to-the-theme-file/

gravity_form( $id_or_title, $display_title = true, $display_description = true, $display_inactive = false, $field_values = null, $ajax = false, $tabindex, $echo = true );

要了解引导模式以及如何使其持续存在，请参见此处：prevent bootstrap modal window from closing on form submission