WordPress Contact Page

Guide & tutorial to learn how to create a contact us page in WordPress sites and add a Google Map on it in different & effective methods

Updated on April 11, 2024
WordPress Contact Page

Guide & tutorial to learn how to create a contact us page in WordPress sites and add a Google Map in different & effective methods.

How to create a WordPress Contact Page and map?

WordPress Contact Page

In this tutorial on Visualmodo knowledge base, we show you how to create a WordPress contact page and map page using the contact form 7 plugin and our theme contact template.

Using Contact Form 7 Free Plugin

First, you must install and activate the Contact Form 7 plugin on your WordPress site. As soon as you start our Visualmodo theme on your WordPress.

You will see a message at the top of your wp dashboard asking you to click on the button and install the plugin with one click; however, you can install it in a standard way by going to the ‘Plugins’ area and searching for the contact form 7 free plugin.

After you install and activate the plugin, you need to create a form for your site users to send you e-mails, for it you need to see the plugin tutorials here. The theme comes with a standard one. However, you need to change the e-mail send info, so please visit the tutorials of the plugin developers.

Please watch the following video and the plugin documentation to build your contact form and properly attach it to your e-mail.

NOTE: The contact form is just a recommendation. You are free to use the WordPress plugin you want. So, we make sure that our themes will work perfectly with all WordPress plugins.

Using WPFroms WordPress Plugin

Learn how to use WPForms free WordPress plugin to create your contact page form. Guide & tutorial to learn how to create a contact us page in WordPress sites and add a Google Map in different & effective methods.

How to Create a Contact & Map Page Using WPBakery Page Builder Plugin?

Log in to your WordPress dashboard to apply this information on a page. Go to “Pages’ Add New’. Click on the ‘Page Builder’ blue button. Click the ‘Add Element’ button and select “Contact Form 7′.

Finally, a window will open to you select the field created on the plugin area. Click on the ‘save’ button to apply it on the page.

To apply a map, you can follow two ways. 1 – Firstly, select the ‘Google Map’ page builder element. Re-apply the latitude/longitude on the window that will open and save it.

The ‘Map embed iframe’ asked on the Google Maps Visual Composer element is built on Google. How to get it? Visit Google Maps to create your map (Step by step:

  1. Find location
  2. Click the cog symbol in the lower right corner and select “Share or embed map”
  3. On the modal window, select “Embed map”
  4. Copy the iframe code and paste it).

Please take a look at the attached photo. In the attached photo we used 2 columns layout and applied content in one column and the contact form 7 element in the other. The result page is on this demo page

WordPress Contact Page

NOTE (while some other maps plugins usage): To see your location latitude/longitude and convert your address on this code, please go to http://www.latlong.net/convert-address-to-lat-long.html and type your location. After you complete all the theme options fields with your information.

It would help if you also built your own Google Maps API key to enter on your contact map options field called ‘Google Maps API Key.’ This is an essential requirement from Google Maps, and you can build your key here.

How to create a WordPress contact page and map using our WordPress themes – By Visualmodo

Build a Contact & Map Page Using Elementor Free Page Builder Plugin?

In this video tutorial, you’ll learn how to build a contact page using the free Elementor website builder plugin and add Google Maps.

Top Reasons Why a Business Website Needs a Contact Us Page?

  1. Customer Inquiries: A Contact Us page provides customers with a direct and convenient way to contact your business with inquiries, questions, or concerns. It serves as a communication channel between your company and potential customers.
  2. Customer Support: A Contact Us page acts as a gateway for customer support. Customers can use this page to report issues, seek assistance, or request permission for your products or services.
  3. Lead Generation: Including a contact form or contact details on your Contact Us page enables potential customers to express their interest in your products or services.
  4. Building Trust and Credibility: A Contact Us page adds credibility to your business. It shows that you are open to communication, transparent, and willing to engage with your audience.
  5. Local and Global Reach: A Contact Us page allows you to provide different means of contact, such as phone numbers, email addresses, physical addresses, or even live chat options.
  6. Partnerships and Collaborations: A Contact Us page is valid for customers and potential partners, collaborators, or suppliers.
  7. Feedback and Testimonials: A Contact Us page often includes a section for customer feedback or testimonials.
  8. Compliance and Legal Requirements: Depending on your industry or location, there may be legal requirements for businesses to have a piece of visible contact information on their websites.

In conclusion, I hope this guide to create a contact page on WordPress helps.

Can’t find what you’re looking for?

Contact Support