If you don’t have Elementor Pro installed yet, do it now. In this tutorial we show you how.
Introduction
If you need website’s visitors to have a way of contacting you, you can provide an email or you can use a contact form. The second of these has the advantages of providing your website’s visitors with an easy interface for communicating which also allows you to get all the information you may need.
There are two ways to add contact forms to a WordPress site. You can code one for yourself or you can use a plugin. While the former has the advantage of design and control of implementation, it is not that easy to do. You’d have to make it work, then style it well. Plugins on the other hand, can lift up most of this heavy work for you, providing you with a working, nice looking form.
There are many plugins that allow you to add Contact Forms, but for this article we will be using Elementor Pro’s Contact Form widget.
Using Elementor Pro’s Contact Form Widget
Designing the Form
It’s really easy to create a Contact Form with Elementor. Just select the Form widget, when in the Elementor editor, then drag it into a section.
However, for this article, instead of creating our Contact Forms on our own, we will instead make use of Elementor’s template libraries.
First, click on the Add Template button the search for Contact in the Category dropdown as seen in this image:
From there, just choose a template. Here’s the template we will be using:
We choose this template since it has all we need. Fields to place information in and a Google to show where the website may be based. We will be editing the template it so that it fits what we need.
First, we will change the title above the form
Then we change the field placeholders on the form instance:
Add an additional field:
Then modify the column widths so that they fit in the same row:
We will also edit the block on the right so that it looks like this:
Form Actions
Now after a form is submitted, we can give it different actions. By default, it has a send email action but you can modify it as necessary.
Email Settings
Lastly, we need to configure the email settings. This includes where the emails will be sent, what their subjects can be and what the email body itself. See the image below.
When that’s done the form is ready. Here’s what it looks like on a page:
(Optional) ‘My Emails aren’t sending.’
This is a common issue and is actually documented by the Elementor team themselves. The Elementor team says that to resolve this issue, you need to contact your web host. Otherwise, you may need to configure your site to send emails. Here is a list of SMTP providers which Elementor suggests.
Conclusion
Thank you for reading our tutorial, we hope you learned a lot!