Gravity Form in a Pop-Up (Modal) Box

Sometimes necessity is the mother of invention. Not only did I need a way to have Gravity Forms in a pop-up box but videos, images, and other content as well.

I was creating a new WordPress site for one of my clients (finally), taking them from a static HTML site. This church site had not only podcasts but Vimeo videos they wanted to pop up in a  window just like the static site. I used a simple plug-in called WP Video Lightbox to add the Vimeo Video to a pop up box. I tried the big brother plug-in WP Lightbox Ultimate Plugin but preferred the simple look of the free version. I have used Tips and Trick Wp eStore and Wp eMember plugins so I know the developer is a reliable source. (Note: I don’t mind writing short code and I am their webmaster so it is easy for me to add it as I create the code. )

When I got to adding the sign-up forms to the new site I also wanted the gravity forms to display in a pop up box. I could use the same plugin because it had an iframe option. Here is the overall usage guide.

To open your content inside an iframe:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “wp-video-lightbox” to it (rel=”wp-video-lightbox”).
  3. Change the href of your link so it points to the webpage you want to open.
  4. Then add “?iframe=true” as a parameters in your HREF so wp-video-lightboxknows to open the content in an iframe.
  5. Then add the width and height as parameters in your HREF(&width=100&height=100). Please note that the dimensions can be percent based.
<a href="http://www.apple.com?iframe=true&width=500&height=300"
 rel="wp-video-lightbox[iframes]"> Apple.com</a>

Now came my next issue…the form needed to be on a blank template page – no header, footer, or navigation. Since I use Genesis Framework and its Child themes this was as simple as creating a landing page. A quick Google search led me to Brian Gardner’s post Creating a Landing Page in Genesis. (He removed it in one of his site redesigns)

1. First you need to do is create a blank_form_page.php file, which you’ll place inside your child theme’s folder. Start that off by placing this code at the top of it:

[[code]]czo0NTpcIiZsdDs/cGhwIC8qIFRlbXBsYXRlIE5hbWU6IEJsYW5rIEZvcm0gUGFnZSAqL1wiO3tbJiomXX0=[[/code]]

2. Next you need to add a custom class in case you need it for styling.

// Add custom body class to the head
add_filter('body_class', 'add_body_class' );
function add_body_class( $classes ) { $classes[] = 'custom-form-page'; return $classes; }

3. Now add the function to remove the header, navigation, breadcrumbs, the footer, and the loop.

// Remove header, navigation, breadcrumbs, footer widgets, footer
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

genesis();

4. Save and upload the file to your Genesis Child Theme folder.

5. Create your Gravity Form and add it to the page. Select the template “Blank Form Page” and save it.

6. Go to the page or post you want the form to pop up from.

7. Create the link text to the form page.

8. Go to HTML view and add the parameters in the link like the example above.

Hope this helps other Genesis users who also use Gravity Forms.

Scroll to Top