How to Add a WordPress Contact Form In the Gutenberg Block Editor?

ABOUT THE AUTHOR

The girl who writes better than she talks. Web trends hunter, passionate traveler, Reese's lover.

Top 8 Mega Menu WordPress Plugins Compared
Prev post
  • Sep 03, 2021
  • 5 min read
  • 2,434

How to Add a WordPress Contact Form In the Gutenberg Block Editor?

Are you building a landing website for the purpose of collecting user data?
You probably need some good WordPress Contact Form examples. A contact form will help build a bridge between you and your visitors. Also, it will work for a promotion, because you may use it for email marketing too.

In this tutorial, we will talk about two options for building and customizing contact form in the Gutenberg block editor:

Both WordPress Contact Form examples provide you with responsive design and only a few form fields so users do not get overwhelmed with filling in much data.

Both plugins are 100% free and can be downloaded from the official wordpress.org repository by the links.

Adding a WordPress Contact Form Plugin

1. Contact Form Block for Gutenberg

Unlike the Contact Form 7 plugin, Getwid represents a free collection of 40+ multipurpose Gutenberg blocks. With so many different content elements, you can create a visually appealing page section of any kind.

Main Features:

  • Simple & real-time customization;
  • Extensive attributes for each block;
  • Excellent compatibility with any Gutenberg theme;
  • Can be combined with core Gutenberg blocks.

View Getwid Demo.

Now, let’s get straight to the Getwid block for contact forms.

This Contact Form WordPress Block generates fully-functional contact forms automatically. The template includes customizable fields, labels, and offers the reCAPTCHA feature to avoid spamming.

First of all, you go ahead and download Getwid from wordpress.org. You can download the file from its official website, or search for Getwid in the WordPress dashboard (“Plugins” > “Add New”).

Now that you activated the plugin, go straight to the page where you want to insert a contact form. Click “+”, type in “contact form” and choose this black-and-white icon (see the image):

You will see the contact form fields set by default (name, email, and message). You can choose which field you want to mark as required, and which ones will stay optional. Finally, there comes a Submit button with the ability to edit its content & styling :

As mentioned earlier, you can add reCaptcha to protect yourself from getting multiple spams. To set up reCaptcha, sign up for an API key pair, get credentials and insert the token through the block configuration panel.

After it’s complete, add a Captcha block in between the last field and the Submit button:

Another cool option is that you can create more than one contact form block on a single website. They may have different purposes and IDs so that they can get delivered to your email address with different email subjects. Those emails will be sent to the email address stated in the WordPress dashboard > Settings > General.

Finally, you get plenty of styling options for the Submit button. More importantly, it will automatically match the styling of your current WP theme.

P.S. If you wonder about other functions that your website (landing page) can do besides collecting user data, the next suggestion is for you.

The MotoPress company (creators of the Getwid plugin) created a WordPress Scheduler plugin to help you manage online bookings for your appointment-based service.

Click to learn how to enable hourly appointment bookings on WordPress with Gutenix + this MotoPress plugin.

2. Contact Form 7 Plugin

Go to the “Plugins” > “Add New” and search for the Contact Form 7 free plugin. Click on the “Install Now” button and activate it.

add a plugin

After that, click on the “Settings” button: you’ll be redirected to the list of your contact forms. Here you are able to create a Contact form or edit the existing. That’s exactly what we are going to do.

create a WordPress Contact Form

Let’s give the form a new name – “Get in touch”. Take a look at the Form area, which is located under the contact form shortcode. Here you can easily fill your contact form with the needed fields and add a button.

WordPress Contact Form example form

In the Mail tab, you can edit the email template, where you can set the receiver of the visitors’ letters and a lot more options.

edit the email template

Check the Messages area to edit messages, which you will use in various situations, for example, when a validation error occurs.

edit messages

Additional settings tab is the area where you can add some customization code to style your form up.

add some customization

After you have created a Contact form WordPress block, you have to save it and move to the Gutenberg editor area, where you want to showcase your contact form.

Customize a Get in Touch Block

Now that you’ve created the form, you need to showcase it on the Gutenberg page. Search for the Shortcode block and add it. After that, you need to copy the shortcode (you can find it in the Contact form editing area) and paste it in the required field.

add a shortcode WordPress Contact Form example

Put the shortcode widget into the Cover block. As a next step, you are able to set a minimum height of the block. Apply a colored background and add an additional CSS class, if necessary.

customize the background

In each contact form, there is a need to add some text Paragraph block to provide it with a title. Let’s add it to our section, as well as the separator between the paragraph and a form.

add paragraph

As a final step, you can add one more block to showcase social icons. Simply add an engaging headline and search for the Social Links block.

add socials WordPress Contact Form example

Here you can add the needed icons, choose one of three icon layouts and paste a link:

 choose icon layout

Congratulations!

Now you know 2 options how to create and design a Contact form WordPress block.

If you don’t want to waste your time on creating a form template, there are lots of great free email templates that can be used for this purpose.

8
Appreciate
How to Build the Services & Pricing Sections in Gutenberg?
Next post
Top 8 Mega Menu WordPress Plugins Compared
Prev post
How to Build the Services & Pricing Sections in Gutenberg?
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2021 Gutenix. All Rights Reserved.