How To Create WordPress Contact Forms With Gutenberg

Ever since the announcement from WordPress that they were working on developing a new built-in editor for their platform, we have been wondering how this will affect existing websites, existing plugins and the like.  Gutenberg is the name of the new editor (Fun Fact –Gutenberg is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago) Within Gutenberg, you can easily build and customise pages and posts by using blocks.

You will see more articles from us, on Gutenberg in the future, as we use it for ourselves, but today, I want to talk more on a form plugin, and how it will integrate with Gutenberg.

As you would likely know, forms are a basic essential for most websites. Whether it is a simple contact or registration form, through to more complex forms, you will likely need to set one up on your site.

You can hire a developer to do this for you, or we show you how to do this easily yourself, using WPForms on Gutenberg. We presume you have already created your first form, with WPForms. If not, they have a great tutorial on how to do this here.

Add WPForms to your page or post, via Gutenberg.

STEP ONE:

After you’ve created your form by following the “Setting up a form tutorial” , you’ll need to open the Gutenberg editor for your page or post. To add a new block in Gutenberg, click the + (plus) icon in the upper left corner.

STEP TWO:

Once you’ve clicked the + (plus) icon a menu of block options will display. To locate the WPForms block, you can search “WPForms” or open the Widgets category. Then click the block named WPForms.

STEP THREE:

This will add the WPForms block to the editor screen. Next, go ahead and select the form you want from the Select a Form dropdown.

STEP FOUR:

After selecting a form title, the full form will display within the WPForms block. On the right side of the screen, you’ll see some additional options for the block.

 
Within these block options, you can:
      • Choose a different form within the Form dropdown
      • Make extra form details visible with the Show Title and Show Descriptiontoggles
      • For Advanced Use Only: Under the Advanced section, add CSS classes to the form

That’s it! You can now embed your forms using the WPForms block in the WordPress Gutenberg editor.

    1. Visit WPForms for more information. WPForms Features & Addons