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.
To add a contact form you need to use an extra plugin. 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.