How to create a contact pages with Elementor png

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

44% of web visitors chose 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 of the website owners and designers don’t put up too much attention on their contact page. Hence, they missed a step to provide 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. Won’t waste any of your precious minutes while installing them in your WordPress site. Therefore, if you need more advanced level features, you can upgrade anytime to a premium plan.

Well, let’s follow-through 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.

Install elementor

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

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

install happy addons

⇒ Install Contact Form 7 by following the same procedure.

contact form 7

Now you are ready to go. Get along with 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.

edit 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 on how to create a contact page.

elementor customization page

Step Two – Writing the Page Name

⇒ Now Go to Settings from the bottom left bar.

setting one

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

However, you can write the page name with drag and drop text editor from elementor basic widgets, change colors, drop caps, 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.

1 1
2 1

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

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

add contact form

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 to menu

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

add to menubar
  • 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 drag and drop text editor as we did, and guide users like “Tell Us Something You want.”

contact page with elementor

What to Do Next

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 comes 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.