How to Add a Contact Form Map With a WordPress Plugin

Do you want to add a Google Map to your contact form with a WordPress plugin? 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.

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

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 contact form map inside the WordPress plugin. 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.

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

That’s it! You now know how to easily create a contact form map with a WordPress plugin.

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! 🙂

      1. Hi,

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


      2. Hey Saeed,

        We don’t currently have an option to capture location information from the map. But I agree this would be super useful, and it’s on our feature request list to consider down the road 🙂

    1. Hey Ed- Currently, we do not have the feature to share the location by placing them on the Maps as you’ve mentioned. I have added your vote to the feature request for future enhancements. Thanks! 🙂

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.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.