Open Gravity Forms in FooBox

FooBox Documentation

Open Gravity Forms in FooBox

See Demo Here

Example Code

Here’s the code for the link:

<code><a href=”#gravity_form” target=”foobox” data-width=”600px” data-height=”500px”>Open a Gravity Form by using the Inline HTML Content feature.</a>

Here’s the code for the link target, or “hidden div”:

<code><div id=”gravity_form” style=”display:none;”> [your-gravity-form-shortcode] </div>


Launching a Gravity form in FooBox is done via the same method as doing inline HTML. But one thing is much easier: You can use your Gravity Forms shortcodes rather than adding all the code you would normally need for a form. Here’s the step by step:

  1. Go to the page/post to which you’d like to add your FooBox/Gravity Form. Switch the editor to “Text” mode. You’re going to be doing some HTML code, but it’s easy and a great way to start learning basic code.
  2. Add a link like the example above. Take care to include the class and target of “foobox”.
  3. In that link add the href with a hashtag (#) and a name that identifies your form, in our case #gravity_form
  4. Next create a div like the example above. Take care that it’s id is identical to the href in your a tag.
  5. Next, you don’t want this to appear on the page, so you’ll need to hide it with style=”display:none;”
  6. Add your Gravity Forms shortcode in between the opening and closing div tags.

You’re done!

What this is doing, is telling FooBox to launch the target of the link. In this case, the target of the link is the div we created with the Gravity Form shortcode in it. That div will be hidden on your page, but FooBox will make it visible inside FooBox once it’s launched.

Quick tip

It can be tricky to find the shortcode for your Gravity form but you can have a look at this guide for more info. Essentially, your shortcode should look similar to this:

[gravityform id=1 title=false description=false ajax=true tabindex=49]