Do you know one of the most underrated pages of most of the websites is the Contact Us page?
Many websites owners and designers do not understand how crucial is the Contact page. This is the cosy little corner of your website where the user comes to reach you or to have their query resolved.
But since not much importance is given to the contact pages, they become unwelcoming and sometimes due to poor placement, it makes it difficult for users to find the contact us page. We need to understand how to avoid this problem and how to make our contact us page better.
In this article, we will see what makes a Contact page better and how you can design it with the Elementor Page builder.
So, what makes a contact page better? Let’s see!
Contact Page Best Practices
Here is a list of features and practices of successful contact us pages. Every element here plays a crucial role in making the contact page what it needs to be.
- Make them readily available – One of the prominent places that the contact page’s link needs to be present is in the footer. Every page must have a contact us link in the bottom of the webpage. If you have space, then adding the contact form at the header is also a good option.
- Include useful links – For a product website, it is good to add a link to documentation of the product as many people might come with queries related to the use, or billing in their mind. This also avoids the over cluttering of the contact inbox too.
- Add other contact information – It is highly advisable to add a phone number, email, and the mailing address for your users. This helps in making your contact page more resourceful to them.
- Avoid unnecessary fields and words – Try to minimize the number of areas of your contact form. Doing this will make it simpler for users to put in their queries. There are many good form builder plugins such as Gravity and WPforms that works great with WordPress.
- Add a Success Message – Many times contact forms submit button leads the users to a page which has no message. Merely adding a redirect link to a success page or customizing the contact form to display a success message helps a lot. You can add a simple “thank you for contacting” and can add your turnaround time. You can also link your social media accounts so that your users can connect with you on other platforms as well.
- Make it welcoming – This is one of the most common mistakes that website designers do. You need to make sure that the contact form does not look dull and boring and instead should be welcoming. We will see how you can do that with the help of the Elementor Page builder
- Make it interactive – Nowhere is it written that your contact page should only have a name, email, and message field. You can add interactive elements such as Google maps with a pin on your location.
All these points when integrated on your contact form can do a lot more to your business. Now, we will see how you can incorporate all these points on your website even if you do not know how to code. We will be using the Elementor page builder and the PowerPack Addon for Elementor to design our contact us page.
Let’s dive in!
How to build a Contact Us Page with the Elementor Page Builder
Step 1: Launching the Page Builder
First of all, login to your WP dashboard and then click on the page option on the left. Now look for your Contact Us page and then click on the Edit with Elementor link.
This will launch the Page Builder.
Step 2: Hero Section
We will begin by adding a hero image at the top and adding a title to it. For this click on the “+” or add new section icon and then add a single column structure to your page.
Now click on the row settings and add a background image to the row from the style tab. To make the image and row more visible, you will need to change the height of the row from the layout tab. I am setting the minimum height to ‘600’.
I have also added the Background overlay with opacity 0.57 using the background overlay section in the Style tab. Here are the changes that I have made-
Now for the title…
Drag and drop a Dual heading widget of PowerPack add-on pack on the row. Now change the look and design of the Text to look like we have done below. You can use your creativity and design your heading like the way you want.
Step 2: Contact Form
Now, it is time to add a decent contact form on the page. For this, I am using the Contact Form 7 plugin. You can go with Gravity forms, Caldera forms, Ninja forms or the WPForms plugin. Make sure you install and activate the plugin before we go any further.
If you have not installed contact form 7, you can get it here. Install the plugin and refresh the page which we were designing to get the contact form widget.
Adding the Contact form on the Page
Now drag and drop the contact form 7 widget on the page and then choose the contact form you want to display.
Now it’s time to customize the form. Disable the titles using the toggle button and go to the style tab. Here you can change the color, background, typography, width, padding of the form. For this form, I have made the following changes –
- Changed the Background color, text color for the fields and increased the spacing to 20.
- Added borders to the fields and changed border-radius.
- Changed the placeholder text color.
- For the submit button, changed the width to 170 and changed the color as well.
- Added border and hover effects to the button.
This is what the contact form looks like once completed.
Step 3: Adding other Contact Information
Now just the contact form is not enough for the contact page. You need to give more information to your users if they want to contact you apart from your contact form. For this, we will add another column to the same row and then add info list widget there.
Right click on the column icon the column and then click on “Add new Column” button.
Now drag and drop the Info list widget on the page.
Change the icons, color, text, spacing, and padding from the respective settings. For this list, I have changed the following settings-
- Changed icon, description and the title.
- Item Spacing: 30
- Icon size, box size, and spacing 39, 77, and 25 respectively.
- Changed the Title, description and icon color from the style tab.
- Added top and bottom padding: 50
You can keep the same values I have mentioned above, or you can change and alter them as per your requirements.
This is what the whole row looks like once all the changes are made.
Step 4: Adding Google Maps
The contact us page should have more than just simple text and fields. Some creative and interactive elements add up a lot. For this, we will be adding a custom google map to our page.
Adding Google maps
First of all, drag and drop the Google Maps widget of PowerPack add-on on the page. Make sure that the widget you are adding is by the PowerPack only. The widget’s icon will look like this.
After adding it, enter the location of your office with the help of latitudes and longitudes. You can set multiple locations or pins as well. If you are getting an error, then you can refer to this Doc.
You can change the map controls and the map style as well by choosing one from predesigned themes.
Once you have set up the Google Maps widget, your contact page is ready.
Now the only thing that’s left is making the changes live. For this, click on the Publish button on the lower left corner of the page.
That’s all folks!
Bingo! You have successfully created a good looking Contact Page. This is what the whole contact page looks like once completed.
If you want to make any more changes, you can easily do that with the Elementor Page Builder. You can add many more interactive elements to your page using Elementor and the PowerPack Elementor addon.
If you found this piece of information useful, do share it and in case, you face any problem, drop a comment, and we will come to the rescue!