Meet Our New Innovation

Grab It at Flat 50% OFF

How to create a contact pages with Elementor png

How to Create a Contact Page with Elementor (The Easy Way)

44% of web visitors choose to stay with a business if it has proper contact information. That’s why a contact page is crucial for every website. It’s the simplest way for your visitor to ask queries, product info, or support through a contact page. 

Despite its importance, most website owners and designers don’t pay too much attention to their contact page. Hence, they missed a step in providing timely customer support. But building a contact page is super easy, and it’s more than easier with Elementor.

If you don’t know how to create a contact page with Elementor, this post is for you. As Elementor page builder is one of the most popular ones, it’s quite a smart decision to build and customize every corner of your website with it.

Before You Create a Contact Page with Elementor

You need three core things to build a simple but effective contact page. They are –

  1. Elementor Page Builder
  2. Happy Addons
  3. A form builder (Contact Form 7, for example)

Anyway, you shouldn’t worry a bit. All three of them are free. You won’t waste any of your precious minutes while installing them on your WordPress site. Therefore, if you need more advanced-level features, you can upgrade to a premium plan anytime.

Well, let’s follow through with the installation process.

⇒ Install the Elementor Plugin in Your WordPress dashboard. To do this, go to your plugins section, click on “add new”, and make a search for Elementor in the search box.

How to Install Elementor Page Builder

⇒ After you have installed Elementor on your website, make sure you have also installed and activated Happy Elementor Addons.

To unlock a library full of powerful Elementor widgets, you won’t find any better alternative.

How to Install Happy Elementor Addons

⇒ Install Contact Form 7 by following the same procedure.

How to Install and Activate Contact Form 7

Now you are ready to go. Follow the steps below to create your very first contact page with Elementor.

Step One – Initiate the Page Builder Editor

⇒ Go to your pages from the dashboard, then click on “add new.”

add new page elementor

⇒ On the next page, you need to click on Edit with Elementor.

How to Open a New WordPress Page with Elementor

The next page will show you all the options to create any type of web page you want. Here we will be going through how to create a contact page.

Open a page with Elementor

Step Two – Writing the Page Name

⇒ Now Go to Settings from the bottom left bar.

How to give a page name to Elementor

⇒ Write the page name as “Contact Page”. And change the page layout from default to Elementor Canvas. It’s possible to add images from this section.

However, you can write the page name with the drag-and-drop text editor from Elementor basic widgets, change colors, drop caps, and add images and backgrounds.

Step Three – Add the Contact Page Widget

Let’s get back to the editor. Click on the Plus button and select the first structure. It’s perfect for a contact page.

How to create a contact page with Elementor
How to add new section to Elementor Canvas

⇒ Go to the sidebar and then to the Happy Addons library. You will see the contact form 7 you installed in the beginning. Drag it and drop it on the Elementor editor.

⇒ Now select “Contact Form 1” from the drop-down menu.

How to Create a Contact Page with Elementor

You can click on the “eye” sign to get a preview. Then click on publish the page. And, now your very first contact page is ready. You need just one step to cover.

Step Four – Add your Contact Page in Menus

It’s time to make the necessary changes to your menu. When you have a contact page, make sure it is visible in the menu bar unless the visitors won’t find it.

Hover over the “appearance” from the dashboard. Go to menus.

Add contact page to WordPress with Elementor

On the menu page, you can see the contact page you created a few minutes ago.

Select and Add Contact page to WordPress Using Elementor
  • Check the tickmark on the page you want to see on the front page menus.
  • Click on “add to menu”
  • Save Menu.

Well, let’s go to the landing page. Click on the page from your navigation bar. Your contact page with Elementor is ready and accessible to anyone.

It will look like this. Here, you can use the drag-and-drop text editor as we did and guide users like “Tell Us Something You Want.”

contact page with elementor

Final Words on How to Create a Contact Page with Elementor

Now that you know how to create a contact page with Elementor and HappyAddons, it’s your time to customize it to any level you want. There are different layouts and styling options that come with your contact form builders. Besides, you can add other contact information and maps on the page to make it more outstanding.

So, have you got what you are looking for? If yes, do share this tutorial with others and spread the help.

Share this post

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *