How to Use Gravity Forms with WordPress 5.0 Gutenberg

 

If you are a Gravity Forms user and have recently upgraded to WordPress 5.0, you may have noticed that the “Add Form” button is no longer available in the editor. This is because WordPress 5.0 includes a new editor called “Gutenberg.” While it promises to add substantial new content creation features, it will take a little time for it to mature and for users to get used to it.

So, if you were used to seeing this editor (referred to as the ‘Classic Editor’):

 

Now, you may see something similar to this editor:

This simply means you have WordPress updated to version 5.0 or higher (also called the Gutenberg Block Editor).

USING GRAVITY FORMS WITH WORDPRESS 5.0 (GUTENBERG EDITOR)

If you want to continue using Gravity Forms, there are three options to do so:

Option 1 – Gravity Forms via Classic Editor plugin
Option 2 – Gravity Forms via shortcode
Option 3 – Gravity Forms via widget (Themify)

Refer to the next sections for detailed explanations of each each option.

1- Using Gravity Forms via WordPress Classic Editor Plugin

Let’s take a look at option one.

Step 1:
Go to your ‘Add New’ plugins page and type “Classic Editor” into the search bar.

Step 2:
Once you locate the ‘Classic Editor’ plugin, click “Install Now”

Step 3:
After that, click “Activate” to ensure your plugin is applied.

 

Step 4:
At this point, when you edit any page on your WordPress backend, you will see the classic editor with the Gravity Forms button available. You can use the Gravity Forms button to add and configure your Gravity Forms.

2- Adding a Gravity Forms Shortcode to Gutenberg Block Editor

The second way to add your Gravity Forms is via shortcode, which consists of a few simple steps.

NOTE: This section assumes you’ve already created a Gravity Form with an available shortcode to embed on your page. Copy your shortcode here, or paste it onto a temporary notepad file.

Step 1:
Go to the page you wish to embed a Gravity Form on and click the “+” sign.

Step 2:
Once the Gutenberg block selector pops up, type ‘shortcode’ into the search box.

Step 3:
Once the ‘Shortcode’ widget shows, click on it to insert.

 

Step 4:
Once you see the ‘Shortcode’ block inserted, click into it and paste your Gravity Forms shortcode (first, copy it from your notepad file if necessary)

 

Step 5:
To get the form where you need it, click on the Shortcode’s left upper corner, and hold to drag up-and-down as needed.

 

Step 6:
Next, hit ‘Save’ or ‘Publish’ and you’re finished.

3- Using The Gravity Forms Widget with WordPress 5.0

The third way to insert a Gravity form on your WordPress page is to keep the Gutenberg Editor and simply use a Gravity Forms Widget with Themify.
NOTE: This section assumes you have the Themify plugin installed to your WordPress website.

Step 1:
Go to the page you wish to embed a form on and click the + sign.

 

Step 2:
Then, drag the Widget icon into the block below the editor.

 

Step 3:
Next, search for “Form,” and select the Gravity Form Widget.

 

Step 4:
After that, choose a name and the form you wish to embed, and whether you want the title and description to show.

 

Step 5:
Next, press “Done” and then “Save”, and you are all done!