How to Add a Gravity Forms Form to Your Page with Beaver Builder

As of this writing, the Beaver Builder page builder does not have a built-in module for adding a Gravity Forms form to your pages. However, you can still use Gravity Forms with Beaver Builder, and in this article, I will show you three different methods you could use to add your forms to your pages in the Beaver Builder page builder.

The Shortcode Method

Gravity Forms was built to use a shortcode to embed your forms in a page. Even though Beaver Builder does not have a built-in module for Gravity Forms you can still use an HTML module to add your shortcode to the page.

The only challenge, there is no “shortcode generator” like there is in the Classic Editor and in the Block Editor (shown below).

How to Get Your Shortcode

Gravity Forms has a document on how to create your shortcode, however it’s a bit overkill when you just want a basic shortcode.

Below is the basic shortcode, you can copy and use it on your site, just be sure to change 1, in id=”1″, to your form ID.

[gravityform id="1" title="false" description="false" ajax="true"]

Adding Your Shortcode in Beaver Builder

You will need to know your form ID, which you can locate by following the steps below.

1. Go to Forms => Forms
2. Locate your form and identify your form ID

Complete the next steps once you are in the Beaver Builder editor for the page you want to add your form to.

1. Click the plus to add a module
2. Search for “HTML“
3. Click and drag to add the HTML module to the page
4. Past the shortcode into the module editor
5. Change the ID to your forms ID number
6. Click Save

The Gravity Forms Widget Method

This method is simpler and and does not require that you generate a shortcode or know your forms ID. You only need to know the title of your form.

When Gravity Forms is installed on your site, it adds a “Form” widget to the Appearance => Widgets area.

Adding The Form Widget In Beaver Builder

Complete the next steps once you are in the Beaver Builder editor for the page you want to add your form to.

1. Search for “Form“
2. Drag the Form widget module onto the page
3. Use the widget editor to select your form
4. Click Save

The Third Party Plugin Method

Using the Ultimate Addons for Beaver Builder plugin does more than just add a new Gravity Forms module to the Beaver Builder page builder, it also adds tools for styling your forms from within the page builder.

You’ll need to download, install, and activate the plugin, but once that is done, head on over to the Beaver Builder editor for the page you want to add the form to and follow the steps below.

Ultimate Addons for Beaver Builder

1. Click the plus to add a new module
2. Search for “Gravity Forms“
3. Click to add the Gravity Forms Styler module to the page
4. Use the module editor to select your form
5. Optional: Use the Design Tab to style your form (requires paid version)
6. Click Save

The Wrap Up

There are other plugins (i.e PowerPack Beaver Addons) that can aid in the effort of adding a Gravity Forms form to your page with the Beaver Builder page builder, but hopefully this article has helped you figure out how to get it done easier!

If you need styling help. You can always use the Style Guide provided by Gravity Forms, however if you want to design your form in the Beaver Builder page builder, you will need the Ultimate Addons for Beaver Builder plugin.

If you have any questions, use the comments below.