Contact Page

In this lesson you will learn how to embed a Google map on your website and how to include a Contact form that your visitors can use to contact your from your website.

Embed Google Map

Putting a Google map of your location on your website is a great idea if you have a physical location because it shows people where you are located and provides instant access to driving directions. Even if you’re an online-only business, you may want to show people where you are located with a Google map.

First, head over to https://maps.google.com and enter your street address then follow the steps shown in the image below.

If you would like to customize the size of your map, you can do that by clicking the Medium menu option then selecting Custom Size. A good size for the Make Theme is 960px by 400px. The content area of a page without the the sidebar in the Make theme is 960px wide. If you are using a sidebar, then the content area is 620px wide. So, if you’re using a sidebar, you might want the map size to be something like 620px wide and 300px tall. For the Fit Band contact page, we are not using a sidebar so we set the map dimensions to 960px by 400px.

The end result looks like this.

Contact Form

There are several good WordPress plugins for creating contact forms for your website. We use Gravity Forms for most of our client sites. But Ninja Forms is a free plugin you can use to create contact forms. If all you need is a simple contact form like the one show below, then Ninja Forms is an excellent, free option.

First, install Ninja Forms by logging into your WordPress admin dashboard and heading over to Plugins > Add New. Search for Ninja Forms then click the Install and Activate buttons.

Now, that Ninja Forms is installed and activated you will see that it created a Contact Me form for you. This is great because it’s almost exactly what we want. We just want to make a couple little tweaks, so click the name of the form Contact Me to edit the form.

We want to hide the form title so that we can use the page editor tools and keep our styles consistent. Click Advanced > Display Settings and disable Display Form Title.

To save your changes click Done and Publish.

Now copy the form shortcode.

And paste that into a content section on your Contact page.

Make sure you click the Update button to save your page. Now, when you view the page, you’ll see your contact form.

Get Tips Like This In Your Inbox

If you liked this post, get more like this one emailed to you.

We respect your privacy. Cancel anytime.