WordPress Contact Form Example and Building a Get in Touch Block


I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

How to Build a Services Section in Gutenberg
Prew post
  • Mar 13, 2020
  • 4 min read
  • 1,831

WordPress Contact Form Example and Building a Get in Touch Block

In case you’re planning to build a landing, it is necessary to take a look at the WordPress Contact Form example. 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 an email marketing too.

In this tutorial, we will show you how to build and customize contact form on a WordPress Contact Form example with a responsive design and a few form fields so the visitors won’t be overwhelmed with filling out data.

There are a few methods to make people subscribe to your newsletters. One of them is popups, which appear once a person opens the page. Popups are usually used to improve communication with visitors, get their feedback, and offer another content they will be interested in.

However, in our today’s topic, we are going to use a special plugin to add a contact form. We suggest using ContactForm 7. If it’s not installed on your site, please, do it.

Add a WordPress Contact Form 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 are completely aware of 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.

Call to Action WordPress Block in Gutenberg and How to Build It
Next post
How to Build a Services Section in Gutenberg
Prew post
Call to Action WordPress Block in Gutenberg and How to Build It
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.