---
title: "Open Gravity Forms in FooBox"
id: "176324"
type: "knowledgebase"
slug: "open-gravity-forms"
published_at: "2019-06-26T08:47:19+00:00"
modified_at: "2024-10-24T11:43:16+00:00"
url: "https://fooplugins.com/documentation/foobox/pro-features/open-gravity-forms/"
markdown_url: "https://fooplugins.com/documentation/foobox/pro-features/open-gravity-forms.md"
excerpt: "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]..."
taxonomy_knowledgebase_cat:
  - "FooBox - Pro Features"
---

[FooBox – Pro Features](https://fooplugins.com/documentation/foobox/pro-features/)

# Open Gravity Forms in FooBox

## Related Articles

- [Installing FooBox Pro](https://fooplugins.com/documentation/foobox/pro-features/installing-foobox-pro/)
- [Fullscreen Images](https://fooplugins.com/documentation/foobox/pro-features/fullscreen-images/)
- [Open iFrame Content in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-iframe-content/)
- [Open any HTML in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-html/)
- [Open YouTube or Vimeo Videos in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-youtube-vimeo-videos/)
- [Open Other Video Types in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-other-video-types/)
- [Open FooGallery in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-foogallery-in-foobox/)
- [Deeplinking](https://fooplugins.com/documentation/foobox/pro-features/deeplinking/)
- [Proper Theme Configuration for Sharing Images](https://fooplugins.com/documentation/foobox/pro-features/theme-configuration-sharing-images/)
- [Google Analytics Tracking](https://fooplugins.com/documentation/foobox/pro-features/google-analytics-tracking/)
- [Social Sharing Settings](https://fooplugins.com/documentation/foobox/pro-features/social-sharing-settings/)
- [Adding a Download Function to FooBox](https://fooplugins.com/documentation/foobox/pro-features/adding-download-function/)
- [FooBox PRO Styling](https://fooplugins.com/documentation/foobox/pro-features/pro-styling/)

**Need more help?** Browse all documentation or open a support ticket.

[All docs](/documentation/)

[Support](/support/)

[See Demo Here](https://fooplugins.com/foobox/demos/)

## 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>

## Walkthrough

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](https://docs.gravityforms.com/shortcodes/)
[g](https://docs.gravityforms.com/shortcodes/)
[uide](https://docs.gravityforms.com/shortcodes/)
 for more info. Essentially, your shortcode should look similar to this:

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

Resources

## Find the right next step

Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages.

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Documentation

Search setup guides, product docs, and troubleshooting articles.

[Browse docs](/documentation/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Support

Open a ticket with product details so we can help quickly.

[Get support](/support/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Licensing

Review account, renewal, refund, and license information.

[View details](/licensing/)