Gravity Forms

Example

Open a Gravity Form by using the Inline HTML Content feature.

Code

Here’s the code for the link:

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

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

<div id="gravity_form" style="display: none;">
<h2>Gravity Forms + FooBox</h2>
[gravityform id="1" name="Signup" ajax="true"]
</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 that you’d like to add your FooBox/Gravity Form to. 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.

Leave a Reply