You might have heard about the Gutenberg update for WordPress. Yes, WordPress is now getting ready for Gutenberg. Right now, this feature is available as a plugin. From WordPress version 5.0, it will be available as default.

Hold on!

Before that what Gutenberg means?

The latest editor feature at WordPress is called Gutenberg. It enables you to create web pages using content blocks. Earlier this kind of feature was available only with premium plugins like Divi, Thrive Architect etc. Now, they are coming to WordPress for free.

When you are able to create web pages with content blocks, you will not find the need for coding. So, this feature is definitely exciting and useful for beginners, who find it difficult to code.

Today, in this tutorial, we will catch up on how to use WPForms with Gutenberg. So, first let’s get started with Gutenberg.

How to use Gutenberg?

Right now to get started with Gutenberg, you will need to install this Gutenberg plugin.

Gutenberg WordPress plugin

From WordPress version 5.0, they will be available as default. If you need help in installing a WordPress plugin, do refer to my tutorial.

How to get started with WPForms?

Now, let’s come to the next part of the tutorial. It is all about WPForms.

WPForms is a popular Drag and Drop WordPress form builder. They have both Lite and Premium versions. Some highlights of WPForms is that,

  • It has got more templates, that help us create forms within minutes
  • WPForms has got so many powerful integrations like Mailchimp, Paypal, Aweber etc
  • These integrations help us to manage data entry so easily.

The Lite version is completely free to use and the Premium version has got 4 packages.

WPForms Pricing:

I have attached the pricing of WPForms Premium.

WPforms pricing

The basic package starts at $49/year. However, if you are still not sure whether you want to purchase it or not, then I recommend you to try the Lite version first.

In this tutorial, we will be looking out at the Lite version.

How to Install WPForms plugin?

The Lite version of WPForms is available at the WordPress repository.

WPForms Lite WordPress Plugin

You can easily install this WPForms plugin. Do refer to this tutorial, if you need help in installing WordPress plugin.

Once you have installed and activated the WPForms plugin, you can start creating your first form.

How to create a form at WPForms?

In your WordPress Sidebar, under WPForms, choose “Add New”. Now the next page will lead you to create a new form.

Click Add New in WPForms at WordPress Sidebar

As you can see, you can choose Blank Form and start creating your own form or you can even make use of the templates available. In this Lite edition, we are provided with templates for Contact Form, Signup Form and Suggestion Form.

Create new form at WPForms

I will go on with the Contact Form template. But, Before that, we will have to enter a Form name.

As you can see in the next page, a new contact form is created instantly.

New contact form created at WPForms

I don’t find anything to be added here. So, I click the Save button.

If you want to add more fields then you can make use of the editing options on the left side. Now, your form is successfully created.

How to embed WPForm at Gutenberg?

Now choose Pages-> New Page.

Since you have installed Gutenberg, you can see the Gutenberg layout.

Gutenberg layout with Divi plugin

I have Divi builder too. And that’s why you are seeing “Use the Divi Builder” at the top bar.

To add a new block, just click the plus sign at the top left corner.

Add new block in Gutenberg

To add WPForms block, you can either search “WPForms” or scroll down to open the Widgets category.

WPforms widget in Gutenberg content Blocks

Once you click the WPForms block, it will be added to the editor.

Now, you have to choose the form to display. In the drop-down box, I have chosen the form that I created a few minutes ago.

Choose the form to display at WPForms block in Gutenberg

As soon as I chose the form, you can see it has been embedded into the page.

That’s it. You have successfully embedded a form created with WPForms into Gutenberg.

Form created with WPForm embedded in Gutenberg

Hold on!

You can still make some more changes to this block. To do that, click the block. Now, at the top left corner, you can see three dots. Click that and now choose “Show Block Settings

Choose Show Block Settings in WPForms block in Gutenberg

Now, on the right side of the screen, you can see some additional options for the block.

Additional options for WPforms block in Gutenberg

For this WPForms block, it has got four options namely,

  • Form: Here you can change which form you wanted to display
  • Show Title: By switching it on or off, you can either display or hide the Form Title
  • Show Description: Similarly, you can either display or hide the Form Description
  • Additional CSS Class: If you want to add more CSS styles to add this form, then you need to add the CSS class here.

Wrapping Up:

So, that’s it. In this tutorial, we saw:

  • How to install a Gutenberg plugin?
  • How to install a WPForms Plugin?
  • Also, How to create a form at WPForms?
  • And Finally, Integrating the created form using the Gutenberg editor.

If you like the features of WPForms, then I recommend you to try the premium version of WPForms.

Try out WPForms!

Don’t forget to pin this.

How to use WPForms with Gutenberg Editor in WordPress?

Here are some relevant WPForms resources for you to read:

Crafted by Nirmal Kumar
Nirmal Kumar is a Blogger at OnlineRockersHub and PayUOC. He is inspired by a lot of bloggers all over the world. He blogs on Affiliate Marketing, WordPress Guides, Blogging Tips, Money Making Ideas etc He is currently pursuing Mechanical Engineering. You can read all his posts at OnlineRockersHub.

Follow on: Facebook, Twitter And read all posts by Nirmal Kumar

Join our Facebook Group!

Let's discuss more about Blogging.

You have Successfully Subscribed!

Pin It on Pinterest