Skip to content

How To Use Contact Forms With Elementor Pro

  • 4 min read
  • by

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.

drag and drop the form widget

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:

choose category "contact"

From there, just choose a template. Here’s the template we will be using:

our template

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

change the title

Then we change the field placeholders on the form instance:

change placeholder

Add an additional field:

add additional field

Then modify the column widths so that they fit in the same row:

modify width 50 %

We will also edit the block on the right so that it looks like this:

edit the block

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.

actions

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.

email settings

When that’s done the form is ready. Here’s what it looks like on a page:

finished contact form

(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!

Kristin Eitel

Kristin Eitel