How to Display a Map With Your WordPress Contact Form

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.

WPForms is the best WordPress Form Builder plugin. Get it for free!

Thinking about adding a blog to your site? Check out this list of the top ways to use WordPress to make money blogging.

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.

Make sure to take a look at these shocking digital marketing statistics for some facts that may help your business online.

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

Still collecting data using Google Forms? You don’t have to! Check out this list of the best Google Forms alternatives.

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:


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.

Hiring for your small business? Make sure to check out our tutorial on how to add a job application form to WordPress to reach candidates from all over!

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

Final Thoughts

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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.


  1. hello,

    I want Google map in frontend. User pick any location on map and that location saves in form field which we can save.


    1. Hi Nitin,

      Unfortunately we don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion! 🙂

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.