Multi-page form in modal window [RESOLVED]

Get Help
, , ,
1

Hi everyone!

We are implementing a multi-page form into a modal window (thickbox) but the javascript doesn’t interact with the form, we can’t switch “pages” and can’t submit the form.

our demo is at https:// rs.instadesign .co.uk/shop/retro/cateye-brown-brow-with-champagne-bridge/ - click the add to basket link

Any help is appreciated

Regards

2

We recommend this plugin to put your Gravity Forms form in a modal (even a multi-page form):

3

I would rather code it manually so we have control over it, is this possible?

I did try the plugin but it doesn’t work for a few reasons:

  1. the actual form is hidden in the popup, I used the shortcode
  2. if I use browser tools to show it, clicking the next and previous buttons closes the popup.

Any help would be appreciated

4

I’m afraid we can’t help with custom code and we generally recommend that plugin. It works very well and the plugin author works closely with Gravity Forms to ensure compatibility. I’ll leave this open in case there is someone else in the community that can help with the custom functionality.

5

I don’t understand how it’s custom code, the custom code has been done to implement the form in the modal but the plugins code stops working when implemented, I am able to write the code to make it work but i then run the risk of it breaking in a future plugin update.

6
  1. I’ve seen this error once before, and it was caused by a third party JavaScript conflict with Gravity Forms Conditional Logic code. I’d recommend temporarily disabling all plugins except Gravity Forms and the Popup plugin and re-test. If the problem persists, also try temporarily swap themes. This will help you narrow down the cause of the conflict and assist you in debugging.
1 Like
7

You can also use the Debug add-on to quickly disable plugins and your theme without disrupting any site visits:

1 Like
8

Forget that premium plugin.

Allow me to ragepost a pure CSS modal that supports multipage gravity forms:
#myDiv{display:none;}
#myDiv:target{display:block}

Put this html on your page:
<div id="myDiv">[gravityform id="1"]</div>

trigger with:
<a href="#myDiv">open</a>

If you need a close button, it’s just
<a href="#">close</a>

9

Hi @tf - I am going to close these old topics to prevent them from being bumped. Thank you for sharing your solution here. If you would like to start your own topic about the WP Popup Maker or any other modal solution, please feel free. Thank you/