WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Display a Map With Your WordPress Contact Form

by Courtney Robertson on Jan 26, 2017

Do you want to add a Google Map to your contact page in WordPress? Embedding a map in your contact form will help save you time and bring more business to your store. In this tutorial we’ll walk you through how to display a WordPress contact form with a map.

Why Add a Map in a Contact Form?

You might be wondering why you would add a map to your contact form rather than just embedding it on a page.

When you create a contact form with WPForms, you’re able to embed that same form in multiple locations. Placing it in various locations around your site can help you get more leads through your contact form.

With a map embedded in the form itself, it’ll be automatically included with the form, no matter where you place it.  You’ll save yourself some time having by not having to embed the code every time.

Making a Contact Form

Let’s get started creating your form with a map embedded.

The first thing you need to do is install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Also, you’ll need to have a form created. See our tutorial on How to Create a Simple Contact Form as an example to get started.

Creating a Map to Your Business

Now we’ll need to generate the code to display your map. To do this, we’ll use Google Maps.

After you open Google Maps, search for your business in the top left corner.

search for your business on google maps

On the next screen you’ll have a few steps to go through:

  1. Confirm that you see your company name.
  2. Select Share to see a popup modal.
  3. Select Embed map.
  4. You’ll have several sizes of the map available to you.  Select whichever one you prefer.
  5. Highlight and copy the embed code that begins with <iframe src>.

how to add google maps to a contact us page in WordPress

Adding a Map to a WordPress Form

Next, you’ll need to add an HTML field to your form.  This is where the code provided by Google Maps will go.

After dragging the field to the top of the form, click on it in the right-hand preview panel to see the Field Options.

Paste your code into the box on the left hand column.

How to add a Google Map to a WordPress contact form

Next, we need to edit the width of the map. Because we’re placing a map inside your form, it won’t display the full width of your form unless we add just a bit of code.

Copy this code:

style="width:100%;"

Then, paste it like you see in the image below.

How to add a full width iframe Google Map to a WordPress form

Now be sure to save your form before moving on to the next step.

Publishing Your Form With a Map

To publish your contact form with a Google Map, go to your contact page.

Select the Add Form button and find the contact form that you just made.

Then you can save and publish your post to see it live.

add contact form integrated with google maps

You can also add your contact form in a sidebar widget if you like.

That’s it! You’ve just created a WordPress contact form with a map. Your form containing a map to your store should look something like this:

WordPress contact form with map

Want to add your logo or an image to your form? You might also want to check out our guide on how to add an image to a WordPress form.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.