How to create contact forms with the new Gutenberg editor

Contact forms are a great way to engage with your readers. For example, they can contact you straight away after visiting your website or asking for more info about what you sell.

Adding contact forms in pages and post is very easy. Or at least with the old WordPress editor WAS very easy. You only had to download a plugin and insert it. The new Gutenberg editor revolutionised it.

This post contains affiliate links. If you decide to make a purchase, I will earn a small commission at no extra cost for you. Please read my disclosure policy for more info.

What is Gutenberg

Gutenberg, developed by GitHub and WordPress and rolled out last month, is the new editor that will replace the old one in a matter of time. As they say, it will help “non-coding people” to simplify the writing process.

As a result, Gutenberg allows you to use blocks to create posts or pages, giving you the visual result instead of 

Is a bit of a controversial topic: you love it or you hate it! Yoast wrote an interesting post here that will help you understand how to make the most out of it.

How to create a contact forms

As I said before, the new editor is based on visual blocks, instead of coding. So, first of all, you’ll need a plugin that allows you to add content into the Gutenberg blocks. One of them that I highly recommend is WPForms. Form my point of view, is the best around as it allows you to easily create contact forms with a drag & drop builder.

If you are new to the plugin, they offer some useful features to help you build great contact forms:

  • Pre-built form templatets to help you saving time.
  • 100% responsive on mobile, tablets & desktop.
  • Smart conditional logic, to help creating surveys.
  • Instant notifications.

Furthermore, for a more detailed guide on how you can create your first contact forms on WPForms just click here.

Once the contact form is ready you will only need to add it in a post/page blocks.

How to add a contact form in Gutenberg blocks

Now that the contact form is ready, open the page or the post where you’d like to use it. At the top of the page/post title you’ll find a bar with different buttons, and the first one a “+” symbol.

Once opened, scroll down to find the Widget category and you’ll find a list of blocks you can add. Click on WPForms one.

If you’ve followed all the step so far, the next part will be super easy as you only have to select the contact form you desire to include in the page/post. 

And you’re done! Very easy, without the need of coding or to install different plugins. Furthermore, if you’d like to change the selected form or add some CSS style to it you can do it from the “Block Option” at the right of your screen, once you select the contact form.

In conclusion

If you haven’t try it yet, I highly recommend to switch to WPForms to start creating easy and powerful contact forms and even surveys and much more! You can do it on your own or ask your web developer to do it.

A couple of my clients already use it and they find it amazing and very easy to use, especially if you offer services where your readers need to enquire for.

I’d like to know if you use contact forms in your website and which one. Would you recommend it or would you switch for a better one? Let me know in the comment below.

Isa Lillo


Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top