WordPress: Integrating PrettyPhoto with a GravityForm

One of the keys to becoming a better WordPress developer is knowing what plugins to use, and better yet, not use. It is a discipline to keep your site lean and mean in light of the multitude of plugins out there. Plugins are good – they add things to our sites that we need, but a sure sign of a noobie WordPress developer is a site with too many. Therefore we usually try to build functionality into our themes or leverage existing plugins / site components wherever possible rather than adding yet another plugin.

What does this have to do with PrettyPhoto and Gravity Forms

We recently had a client that had a WooCommerce store and wanted to have a secondary call to action (CTA) on their product pages in addition to the normal ‘add to cart’. The secondary CTA functions as a ‘request a brochure’ form on the site, and we wanted the CTA to open the form in a lightbox type modal window.

It just so happens that WooCommerce ships with the PrettyPhoto lightbox to enable large product photos to display in a nice way, so we decided that we should also use PrettyPhoto for our modal window. We also had Gravity Forms installed on the site for normal ‘contact us’ functionality, so we could create the CTA brochure request form using that if we could load the Gravity Form inside of Prettyphoto.

Side-note: WooThemes – WHY PRETTYPHOTO? This is a relatively obscure lightbox to use and it doesn’t have a very graceful API.Seriously. Colorbox would be a much better choice. Also I’m not sure that a lightbox should be bundled with WooCommerce at all – add some compatibility with a well supported lightbox, but don’t include it.

The Setup: Displaying the form in PrettyPhoto

This is the easy part. In order to display the Gravity Form inside of a PrettyPhoto lightbox you first put the form into your page somewhere. It doesn’t matter where really because you are going to hide it anyway. You will need to wrap your form in a DIV with an ID that you can target, and in this case we added “display:none;” on the wrapper to hide the form. You will also need to have a button that has a ‘data-rel=”prettyPhoto”‘ attribute to be your trigger to open the lightbox. Note that WooThemes set it up to use ‘data-rel’ instead of just ‘rel’ which further complicates implementation. See the page_content.html code below – this is assuming you are placing this code in your page content, you will have to adjust accordingly if you want it in your template content.

Why is there even a blog post on this?

It turns out that integrating these two components isn’t quite as easy as it should be. Yes PrettyPhoto does support displaying HTML content inside the modal, and Yes we have put a Gravity Form in a modal before as well, lots of people do, however when a GravityForm is displayed in THIS modal it does not work as expected. For some reason when you trip a form validation error on the Gravity Form within the lightbox you do not get any validation messages. The form appears to work correctly, the ajax calls happen correctly (you are using ajax, right?), but there isn’t any visual feedback as to what prevented submission. This is not good, and won’t work in production.

I decided to ask the Gravity Forms team themselves for assistance with this problem – we have a developer license that gets us priority support, after all. Unfortunately they weren’t particularly helpful – they just advised us to use the EasyModal WordPress plugin instead of PrettyPhoto. Thus encouraging more Pluginitis!

Finding a solution

That didn’t work out, clearly, so I decided to dig in and do some debugging. My first thought was to inspect the form during and after submit to see if I could tell what was going on. This did not have immediate results, however I noted that when the PrettyPhoto opened, it was actually copying the form’s DOM elements into the modal instead of moving them. That left two copies of the form in the DOM rather than just one, which may be the source of the problem. I ‘unhid’ the original form in the DOM using web inspector and sure enough – the validation error messages appear on the original form (in the page content) but not on the form within the modal.

At this point the task became trying to find a way to update the modal content after the form is submitted. Fortunately Gravity Forms does have a well-documented API including some javascript hooks / triggers that can call other methods after the form renders. It turns out that you also need to call another function after the form ‘confirms’ to display the confirmation message. See the javascript code in the gist imbedded below for the complet javascript solution – in our case we were loading a custom.js file within our child theme, so we added this code to that file.

Lastly you might be wondering the end result for how we integrated this into our theme – that will be coming up in another blog post!