Recently on Skype, Christine was asking how to display a Gravity form in a light box using the iThemes Builder theme. After trying multiple techniques found online she was not able to get it to work successfully. My first thought was to use the version of Thickbox that is included with WordPress. That would have worked but it would have required adding two lines of code to the functions dot php file and Thickbox is not responsive.
I am going to show you how to use the Royal PrettyPhoto plugin to display a Gravity form in a light box using the iThemes Builder theme.
Once the form has been created create a layout in iThemes Builder that only has a content area.
Gravity Form on Page
Then create a page that includes only the title and the gravity form shortcode. Later I will call this the form page.
Light Box Plugin
Install and activate the Royal PrettyPhoto plugin. Then go to Settings > Royal PrettyPhoto.
Change the settings to hide the photo title, hide the Photo Control, Hide the social icons, Hide the Photo Thumbnail, and Hide the Photo Nav Arrow. Be sure to save the changes.
Gravity Form In A Light Box
Now it is time to edit the page the link will be on. Add a link to the form page. For Example:
< a href="http://mydomain.com/form/">Contact Us</a>
Then add the following query string to the end of the page url
Your link should look similar to
< a href="http://mydomain.com/form/?iframe=true&width=600&height=700">Contact Us</a>
Let me explain so you can make changes as needed. The first query variable iframe tells it to display the page it is linking to in an iframe. The width is the width of the iframe. The example shows the width in pixels, but you can also set the width to a percentage such as 100%. The height is the height of the iframe. The example shows the height in pixels, but you can also set the height to a percentage such as 100%. If the page is bigger than the size provided scroll bars will appear.
If you were to save the page and view it in the browser the form would not display in a lightbox when the link is clicked. It would actually go to the form page. So we need to do another step.
< a href="http://mydomain.com/form/?iframe=true&width=600&height=700" rel="prettyPhoto[iframes]">Contact Us</a>
Add the rel attribute to the link. Save the page and view it in the browser. When you click the link the form is now loaded in the lightbox.
You can also style the Thickbox as needed.
Note: If you are using a theme other than iThemes Builder you will need to create a plan page template that does not have styling. I also want to mention that displaying a Gravity form in a light box is not the best solution for mobile visitors.