Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Build a Get in touch block and create a Contact form in WordPress

ABOUT THE AUTHOR

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 review section on website
Prew post
  • Mar 13, 2020
  • 4 min read
  • 558

Build a Get in touch block and create a Contact form in WordPress

In case you’re planning to build a landing, it is necessary to create a contact form for a few reasons. It will help build a bridge between you and your visitors and also 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 WordPress layout 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 are 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.

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

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 WordPress block or edit the existing – that’s exactly what we are going to do.

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.

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.

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

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

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.

Now that the contact form is created, 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.

To customize the background of your contact form in WordPress, you need to 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.

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.

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.

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

Congratulations! Now you are completely awarded how to create and design a Contact form WordPress block.

However, 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.

6
Appreciate
Building a Call to action WordPress block in Gutenberg
Next post
How to build a review section on website
Prew post
Building a Call to action WordPress block in Gutenberg
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. 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 © 2020 Gutenix. All Rights Reserved.