Adding a GravityForms Form to Your Page

  Uncategorized

Adding a GravityForms Form to Your Page

If you’re a managed WordPress customer, you have access to a number of great premium WordPress plugins that can help with many different site functions, including GravityForms. GravityForms is a powerful and easy-to-use form creation tool for any type of form: payment forms, contact forms, and more. Once you’ve created forms, how do you add them to a page?

Adding Forms to a non-Divi page

Using the Classic Editor

If you’re using the classic editor, adding a GravityForm to your page is a piece of cake. Simply press the “Add Form” button above the textbox, pick the form you want, and you’re good to go!

The classic editor, with the “Add Form” button above it

Using the Gutenberg Editor

With WordPress 5.0, a new editing experience was introduced, known as Gutenberg, which completely changed the entire page creation process. There are two ways to insert forms into a page when using Gutenberg. The easiest way is to use the GravityForms Gutenberg plugin, which adds the ability to create a GravityForms block in Gutenberg, making the form addition process really easy. Unfortunately, this plugin cannot be installed by our clients, so if you’re interested in going this route, please contact us at support@mennonite.net. If you’d rather do it yourself, please see the next section:

The second way to add forms to Gutenberg pages is to first go into the form’s editing mode. Up at the top of the page, next to the title, you should see a form ID tag, similar to the orange box here:

Form title and ID

Once you have the form ID, you can add a form by creating a new shortcode block in Gutenberg (check here for a more in-depth tutorial on Gutenberg), and add a GravityForms shortcode to the code block. Shortcodes are little tags that allow WordPress to insert content into the page. To add a form with ID 1, for example, you would add a shortcode that looks like this

This is a basic example, and will simply show the form. You can add other options to the shortcode, however, to do things like hiding or showing the title or the description. Click here to learn more about GravityForms shortcodes.

Adding Forms to a Divi Page

Similarly to Gutenberg, there are two ways to add a GravityForm to a Divi page: the easier way is to install the GravityForms Divi module, which adds a GravityForms module to Divi, that can simply be added to a page. Once again, however, this plugin needs to be installed by us, so contact support@mennonite.net if you would like this plugin on your site. If you’d rather do it yourself, please keep reading.

The second method for adding forms to a Divi page is very similar to that of a Gutenberg page. First, go into the form’s editing mode. Up at the top of the page, next to the title, you should see a form ID tag. Once you have this form ID, add a code section on your Divi page, and paste in a shortcode similar to the one below

Of course, you’ll want to put in the ID you found in place of the 1 shown above. This will allow WordPress to place the correct form wherever you put the shortcode. Click here to learn more about GravityForms shortcodes.