Gravity Forms are a great way to add a dynamic form to your site, and boy there is power behind it for sure. One of the great features of Gravity Forms is that you can add a form anywhere you want, including within a modal popup. Cool huh!?!
A great customer asked me if it were possible to add a multistep Gravity Form to a modal popup, as there seem to be issues with the normal procedures of doing such. The issue was that when the ‘next’ button was pressed, the modal would close and the form would close with it! So, I came up with a modal solution to the issue!
I racked my brain for a few minutes, did a bit of googling and came up with nothing that seem to be a workaround for this project. Until, I remembered that a modal is basically a window sitting on top of the current window, and often is simply the display. The display is predominately controlled by CSS, so what if there were a modal popup created with purely CSS? Could this be done, absolutely, but would it work with a form inside, I suspected so.
After a quick research on ‘pure css modal’ in google, I found a ton of Codepen’s, this one by Kasper Mikiewicz in particular caught my eye.
Seems pretty cool right!?!
Well, how about the HTML and the structure that needs to lend itself to handle it all? The trigger from that is not a ‘click’ but rather a check to see if the ‘checkbox’ is checked. Why didn’t I think of that!?! Well, playing off the normal ‘button’, in this case it was a matter of taking the input and styling it as a button. Not so difficult after all.
The codepen shows us how it all works and why. But, to apply this to take a Gravity Form shortcode is another part of tailoring this whole thing to work together. If you look at the code, you will notice that there are two triggers, one checks the checkbox, and the other unchecks it. if “checked”, set the opacity of the modal to 1, and “unchecked” set the opacity to 0. Easy enough. So the only place that you can unhide/hide the modal is by “checked/unchecked” of the input via those two triggers (basically hidden input checkbox types).
This resulted in the perfect solution to the ‘next’ button issue stated earlier. So, adding the shortcode to the HTML, easy. Then, applying a few styles to make the form look nice, and viola! you have a multistep form within a modal – that does not close when ‘next’ is clicked!
To make it a little more interesting, in a normal popup window, if you hit the ‘esc’ ( escape ) key on your keyboard, it is supposed to close the modal as well. However, with a pure css modal, this does not work out of the box, so I added just a touch of jQuery to let this happen.
Here is the final plugin – created specifically to handle this pure css modal used for Multistep Gravity Forms.
Let me know what you think!