重力形式的 Wordpress 中的 Bootstrap 模態

Question

我在 Wordpress 網站上有一個頁面，其中有一個 Bootstrap 模態，當單擊圖形時會出現該模態，並且在模態內有一個 Gravity Form。 當頁面第一次加載時，模態中的重力表單代碼會導致我的一些導航鏈接不起作用。 我相當確定它是調用 Gravity Form（通過調用它的短代碼）和 bootstrap 模態窗口的 php 代碼的組合，因為當我從模態中刪除 Gravity Form php 代碼或刪除模態代碼並只顯示頁面上的表單導航鏈接正常工作。

關於為什么在 Bootstrap Modal 中使用 Gravity Form 會導致 Wordpress 導航不起作用的任何想法？

這是帶有代碼的站點： http://www.stlmaa.com/ : http://www.stlmaa.com/

這是按鈕圖形代碼：

<img src="<?php bloginfo('template_directory'); ?>/images/questions.png" width="250px" 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>

Answer 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/

這樣可以解決您的問題嗎？

Answer 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 );

要了解引導模式以及如何使其持久化，請參見此處： 防止引導模式窗口在提交表單時關閉