Create contact form in elementor WordPress - Dot Code

Create a Contact form with Elementor in WordPress

To create a contact form in WordPress, there are different plugins available like Contact form 7, Wp forms, etc. In this article, you will learn to create a contact form with the Contact form 7 plugin and Elementor Page builder. First, we have to know What is contact from?

What is a contact form?

Contact form is a type of form which is used mostly in websites and applications for sending emails to the website managers for getting some information, suggesting new features, or complaints.

Why contact from is important?

Contact forms on the website provide a way for users to communicate back with the company or website managers. So that’s why these are important to get feedback from users and make a link with them. For that purpose, we also create a contact form in WordPress website.

Creating contact form

For creating a contact form in WordPress, navigate to WordPress dashboard > Plugins > Add new > and search for the plugin named Contact form 7. Install and activate that plugin.

create contact from in WordPress
Contact Form 7

After that, there will be a menu item added to the admin menu as Contact. As there is already one form present if you want to use that you can or create new by clicking on Add new.

contact forms
Contact Forms

Setup Contact Form 7 in WordPress

To set up the contact form click on the Edit button which will appear under the Form title. From there all options are available to set up according to your required template. By default the setting doesn’t need any modifications, it works fine, but if you want to make some changes you can.

Integrating the form into your page

To insert the created contact in the WordPress website page, copy the shortcode to that form and paste it into the page where you want to integrate that. Here the shortcode is given in the below image.

Shortcode of Contact form
Shortcode of Contact form

Create contact form with Elementor

Now to use this form with Elementor, create a new page and click on Edit with Elementor. Form there you can manually create a layout, but I will be importing a premade template. For this purpose I installed a plugin named Templately, so before importing the demo install that plugin. You can also use some other plugins for demo content.

So after installation of Templately plugin, there will be an icon in Elementor editor for adding the template, just click on that icon and select template and then insert it to your website. One this is important, that you should have to create an account in Templately and then you will be able to import the templates.

Elementor demo import
To open Templately menu
create contact form in WordPress
Select template from the available templates.

That was it, now select the template and click on insert, you can also preview its’ demo before inserting it. Now here is my final page template imported. You can make some changes to it according to your theme.

Template imported
Template imported

For customization instruction, you can watch the video given below.