重力形式的 Wordpress 中的 Bootstrap 模态

Question

I have a page on a Wordpress site with a Bootstrap modal that appears when a graphic is clicked and inside the modal there is a Gravity Form. When the page is first loaded, the Gravity Form code inside the modal causes some of my navigation links not to work. I am fairly certain it is the combination of the php code that calls the Gravity Form (by calling it's short code) and the bootstrap modal window because when I remove the Gravity Form php code from the modal or remove the modal code and just display the form on the page the navigation links work properly.

Any idea on why having a Gravity Form in a Bootstrap Modal would cause Wordpress navigation not to work?

Here is the site with the code on it: http://www.stlmaa.com/

Here is the button graphic code:

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

Here is the modal code:

<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

I'm not entirely sure what you mean by "navigation issues". Everything seemed fine on the site in regards to navigation so I'm guessing you got that part resolved.

If not and your referring to how the modal closes upon submission, I would recommend that you add an additional ajax attribute to your shortcode so that that the form will stay open. This will make sure that your user knows all appropriate fields are filled out, and it gives them the confirmation. You would also want to remove the "name" field; just make sure you have the right number in the form ID. It should look like this:

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

source: https://www.gravityhelp.com/documentation/article/embedding-a-form/

Does that resolve your issue?

Answer 2

I know this post is SUPER old but it is indexed in Google, so just in case anyone else comes across this during your searches....

You do need to use ajax, or submitting the form will close the modal and redirect you to a new page.

However; to stop the modal from closing the change isn't with the shortcode embed (in fact you should be using the function, NOT the shortcode as per the same URL posted by @ahurleb) but rather the change is with the bootstrap option values. You can make the form persist and have another button set to close manually or when clicking outside the bounds of the modal.

For the function to properly embed the gravity form, see here: 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 );

To understand the bootstrap modal and how to make it persist, see here : prevent bootstrap modal window from closing on form submission