How to Add a Contact Form Block in Gutenberg
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.
You will get the Site Key and Secret Key.
- Paste them into the reCAPTCHA settings of your WordPress admin accordingly. Click here for more details on reCAPTCHA with PublishPress Blocks.
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.
The form options are shown in the right sidebar.
- Change the “Name and message” input placeholders.
- Change the background color of the input.
- Change the border-radius option and the background color of the button.
- Click Publish twice and take a look at the post.
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.
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.
