How to Add a Contact Form Block in Gutenberg

Contact Form

The most common reason for building a personal or business site is to be contacted by other people with common interests, or clients. 

The Contact Form block in PublishPress Blocks makes this possible. The block provides a simple feedback form with customizable options. 

You can create personalized contact forms for each post, or a unified form to show on all your posts and pages.

The contact form block provides integration with the Google reCAPTCHA service which prevents bots from submitting to your inbox.

Keep reading to learn how to use this feature!


Step #1. Install the PublishPress Blocks Plugin

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Enable Google reCAPTCHA

This next step will prevent spammers from inundating our form with fake messages.

  • Click this link to register for reCAPTCHA.
  • Select v2 of reCAPTCHA.
  • Enter a valid domain name: reCAPTCHA will not work on a local installation.
  • Accept the Terms.
  • Click Send / Ok.
200813 Adv Contact Form 001
200813 Adv Contact Form 001

You will get the Site Key and Secret Key. 

200813 Adv Contact Form 002
200813 Adv Contact Form 002
200813 Adv Contact Form 003
200813 Adv Contact Form 003

Step #3. Create a Post

Now let's create a post and use our new contact form block.

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” symbol to add a block or type “/”.
  • Search the Contact Form block.
200813 Adv Contact Form 004
200813 Adv Contact Form 004

The form options are shown in the right sidebar.

  • Change the “Name and message” input placeholders.
200813 Adv Contact Form 005
200813 Adv Contact Form 005
  • Change the background color of the input.
  • Change the border-radius option and the background color of the button.
200813 Adv Contact Form 006
200813 Adv Contact Form 006
  • Click Publish twice and take a look at the post.
200813 Adv Contact Form 007
200813 Adv Contact Form 007

As you can see, you have configured a very nicely laid out contact form with spam protection. I was able to do all of this with just a few clicks. That is the flexibility of PublishPress Blocks.

You can now test the form and check whether you get an email in your inbox.


Step #4. The Global Settings

Every block in PublishPress Blocks has individual settings. You can also choose global settings for all the blocks of a particular type.

  • Click PublishPress Blocks in the WordPress admin area.
  • Click the cogwheel beside the Contact Form block.
200813 Adv Contact Form 008
200813 Adv Contact Form 008

You can configure the default options for the contact form here. That way you will always have the same configuration across all contact forms on your site, instead of configuring it on a per-block basis. 

200813 Adv Contact Form 009
200813 Adv Contact Form 009

Tags: Gutenberg Blocks, Gutenberg Editor


Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE