How to create a WordPress Contact Page and map?

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.

First of all you need to install and active the Contact Form 7 plugin on your WordPress site, as soon as you active our visualmodo theme on your WordPress you will see a message in the top of your wp dashboard asking for you click on the button and install the plugin with one click however you can install it in a normal way by going on ‘Plugins’ area and search for contact form 7 free plugin. After you install and active the plugin you need to create a form for your site users send you e-mails, for it you need to see the plugin tutorials http://contactform7.com/docs/ (the theme comes with a standard one however you need to change the e-mail send info, so please see the tutorials of the plugin developers). Please watch the following video and see the plugin documentation for build your contact form and properly attach it with your e-mail. NOTE: The contact form is just a recommendation, you are free to use the WordPress plugin you want, we make sure that our themes will work perfectly with all WordPress plugins.

How to create a contact / map page?

 

To apply this information in a page you need to login on your WordPress dashboard and go to “Pages’ Add New’ and click on the ‘Page Builder’ blue button, click on ‘Add Element’ button and select the “Contact Form 7′ and 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 – select the ‘Google Map’ page builder element and 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 build 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 modal window select “Embed map” 4) Copy iframe code and paste it).

Please take a look on the attached photo. In the attached photo we used 2 columns layout and apply content in one column and the contact form 7 element in the other, the result page is http://theme.visualmodo.com/peak/contact/.

NOTE (while some other maps plugins usage): To see your location latitude / longitude and convert your address on this codes 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. You also need to build your own Google Maps API key to enter on your contact map options field called as ‘Google Maps API Key’  this is an important requirement from google maps and you can build your key here https://developers.google.com/maps/documentation/javascript/

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

Award-Winning 24/7 customer service

Everyone on our Customer Care team is an experienced Visualmodo user and works in our office. Nothing is ever outsourced.

Visualmodo WordPress Themes Support

Once again, thanks for purchasing one of our themes!

If you need any help, or have any suggestions, please feel free to contact us for Help Desk. If you loved the theme, we would really appreciate it if you could rate it.
Cheers!