how-to-add-a-contact-form-map-with-a-wordpress-plugin

How to Add a Contact Form Map With a WordPress Plugin

Do you want to add a map (like Google Maps) to your contact form with a WordPress plugin?

Placing a map near your contact form will help your user get clarity about their location and help get you higher-quality leads.

In this tutorial, we’ll walk you through how to display a WordPress contact form with a map.

Create Your Contact Form Map Now

Why Add a Map in a Contact Form?

Sure, it’s no secret that most small business owners with websites know why you need a contact form.

But, you might be wondering why you would add a map to that contact form. Well, adding a map to your contact form can be a great idea.

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

Here are some reasons why:

  • Maps on contact forms can help you get better leads with fewer typos
  • Clarify the location that your user is typing in
  • Help your user find an exact location with a moveable pin
  • It’s super easy to do with the click of a button (using the WPForms plugin)

Instead of having to code a map into your website yourself or pay a web developer, you can do it easily with WPForms Pro.

Next, we’ll show you exactly how to add a contact form map with a WordPress plugin next.

How to Add a Contact Form Map

Follow these easy, step-by-step instructions to get a contact form map added to your WordPress website, using a plugin.

Step 1: Download the WPForms Plugin

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.

You’ll need WPForms Pro to access the Geolocation addon.

Step 2: Turn on the Geolocation Addon

Once your WPForms plugin is activated, head to WPForms » Addons and use the search bar to locate the Geolocation Addon. Click on Activate to turn it on.

geolocation addon

The Geolocation addon has some awesome features you can use on your website now that it’s turned on, like these 2 awesome ones:

  1. Form Entry Geolocation: You’ll be able to see where your form users are coming from which can help you better segment your email list.

WPForms geolocation for an entry

2. Address Autocomplete: As users type, your address field can automatically show them their address before they complete it.

Address autocomplete geolocation in WPForms

You’ll be able to use both of these cool tools once you get your contact form on your website, so let’s continue building your map form.

Step 3: Customize the Geolocation Addon

Now that you’ve activated the Geolocation addon, it’s time to set it up and customize it.

Navigate to WPForms » Settings and click on the Geolocation tab.

Geolocation settings in WPForms

Now, you’ll need to choose the provider that you want to get your geolocation info from in the Places Provider area.

Choose a places provider for Geolocation

If you want, you can let your user’s location be pre-filled into a form by checking the Current Location checkbox.

If you check this Current Location box, then visitors will see a box like this when they open a page with your contact form on it:

autocomplete location detection w wpforms

Check out our full documentation on setting up the Geolocation addon to find specifics on the location services provider you’re going to use and how to complete that setup.

Once your location provider settings are all filled into the Geolocation addon settings, you’re ready to create your contact form map.

Step 4: Create Your Contact Form

So let’s go ahead and create your contact form with a map now. This part will take less than 5 minutes.

To get started creating your new form,  click on the Add New button to launch the WPForms form builder.

Add New Form

Now you can enter a name for your form in the Form Name input field. In this example, we’ll use “Contact Us”.

Type in the form name

Below the Form Name, select the template you’d like to use by clicking on it. Let’s do a simple contact form, and we’ll add our map to it shortly.

Create A Simple Contact Form

Next, your Simple Contact Form template will populate with a few standard fields like:

  • Name (First, Last)
  • Email
  • Comment or Message

wordpress contact us form before plugin adds map

Now, there are probably a few more things other form settings you’ll want to configure like notifications and confirmations. If so, (and we highly recommend this) check out our detailed guide on creating your first form.

Great job! Up next, let’s add a field to your form that will let you enable the Display Map option.

Step 5: Turn on Display Map Option

Once your form loads, you’ll see all the fields you can add to your form.

fields on a simple contact form before adding map

In order to use the Display Map option on your form, you’ll need to add either the Address field or the Single Line Text field.

In this tutorial, we’ll use the Single Line Text field so the address shows up all on one line.

To add this field to your form, you can either click on the name of the field, or drag and drop it from the lefthand panel onto your form on the right.

single line text for contact form with map

Don’t need one of the fields? To delete any field from your form, hover over the field and click the red trash can button.

Delete a field button

Ok, now that you’ve added your Single Line Text field, it’s time to turn on a map on your form.

In the Field Options tab for your Single Line Text field, click on Advanced Options.

advanced options to find map option on form field

You’ll see a few different options now, so scroll to the bottom and enable the checkbox next to Enable Address Autocomplete and then check the box next to Display Map.

display map button on forms

The map will default to being above the field, but you can change it to be below if you’d like. Simply click on the dropdown and switch it to Below field.

change field location oncontact form with map (1)

Finally, let’s rename this field to ‘Address’ so your users don’t see ‘Single Line Text’ when filling out your form.

Scroll up in the Form Options panel on the left-hand side and edit the Label to say ‘Address’.

change single line text field to address (1)

Now, make any other changes you’d like to your form and when you love it, click on Save in the top right corner.

save your contact form with a map on wordpress

Great job. Your form is ready to make its debut.

Step 6: Publish Your Contact Form Map

Ready to publish your contact form with a map? With your WPForms Pro plugin, it’s super easy to embed your form on your site.

So once your form looks the way you want it to and is saved, click on the Embed button in the top right corner.

embed your contact form map on a wordpress page

Here, you can select any WordPress page you like, be it an existing page or a new page.

In this tutorial, we’ll click on Create New Page.

Create new page

Next, name your page whatever you’d like and click on Let’s Go!

embed your contact form map on a new page

Voila. This will automatically add your contact form with map to your page in WordPress.

Next, click on ‘Publish’ (or update, if you’re using an existing page) to finally unleash your form live on the internet.

publish your contact form with a map to wordpress

Congrats – your contact form with a map is now live on the internet.

Here’s an idea of how it will look:

contact form with a map (1)

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

Create Your Contact Form Map Now

Build Your Own Contact Form Map Today

It’s super easy to build your own contact form map.

Get WPForms Pro today to access the Geolocation addon that lets you add these awesome maps. You’ll get you access to a ton of other helpful features, too.

And on top of contact form maps, WPForms Pro includes:

  • An Easy to Use Builder – Create your own forms in minutes without writing a single line of code.
  • Surveys – Gather data through surveys and polls and see it in beautiful reports.
  • Form Pages – Get more people finishing your forms by creating distraction-free form pages in just a single click.
  • Order Forms – Accept Stripe and PayPal right on your forms and accept money online.
  • User Journey Reports – See where people were at on your site before they filled out your form.
  • Secure Forms – Protect forms with anti-spam options like custom captcha, hCaptcha, or Google reCAPTCHA v2 or v3.
  • Conversational Forms – Watch conversion rates skyrocket with highly engaging and modern-looking forms.
  • 100+ Templates – Never build a form from scratch again with pre-built templates of the most popular form types out there.
  • Premium Support – Access a friendly and knowledgeable team that’ll help guide you in the right direction if you need help with your website forms.
  • …and so much more.

In fact, if you look at WPForms Lite vs Pro, you’ll see there are a ton of reasons why Pro is so popular.

Final Thoughts on Contact Form Maps

We hope this post helped you learn how easy (and beneficial) it is to add a contact form map to your WordPress website with a 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.

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

And if you like this post, 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.

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.