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.
Table of Contents
How to use Gutenberg?
Right now to get started with Gutenberg, you will need to install this Gutenberg plugin.
From WordPress version 5.0, they will be available as default.
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.
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.
You can easily install this WPForms 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.
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.
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.
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.
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.
To add WPForms block, you can either search “WPForms” or scroll down to open the Widgets category.
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.
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.
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”
Now, on the right side of the screen, you can see some additional options for the block.
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.
Don’t forget to pin this.
Here are some relevant WPForms resources for you to read:
Really interesting update from wordpress Nirmal.
Actually I’m coming across Gutenberg for the first time. I can see its targeted for wordpress users who are not too versed in CSS or does it also help with JS?
Hi Ige Lewis,
Coming across your comment after a long time. I don’t think it assists WordPress users much with Js.