Step-by-Step Guide: Embedding Google Maps with Custom Pins in Your Contact Forms

We’ve completed numerous online forms and often find ourselves repeatedly entering the same address.

Now, picture this: a visitor arrives at your contact page, their address is automatically filled in, and a pin is already positioned on the map. It’s quick, personalized, and saves them valuable time.

Integrating a Google Map with a location pin into your WordPress contact form may seem like a minor addition, but it can have a significant impact. Based on our experience with WPForms, it can enhance form completion rates and provide users with a smoother, more enjoyable experience.

In this comprehensive guide, we will walk you through the process of embedding an interactive Google Map directly into your WordPress contact form – no coding skills required. 🗺️

Why Should You Embed a Google Map in Your Contact Form?

When you set up your WordPress site, you probably included a contact form to allow visitors to reach out about your products or services. If you have a physical store, you likely added a Google Map to assist customers in finding your location easily.

What many business owners may not realize is that you can utilize geolocation toautomaticallypopulate the address field in your contact form and display the visitor’s location on a map. This way, they can easily confirm their address is correct or adjust the pin if needed.

Enhancing the user experience can significantly decrease the likelihood of users abandoning the form.

Understanding the locations of your users allows you to implement geolocation targeting, enabling you to display personalized content and increase conversion rates.

Now, let’s explore the process of embedding a Google Map within your contact forms. Here’s a summary of the topics we will discuss in this article:

• Steps to Embed a Google Map in a Contact Form
  • How to Generate a Google Places API Key
  • How to Restrict Your Google Places API Key
  • How to Add the Google API Key to WPForms Settings
  • How to Create a Contact Form with an Embedded Google Map in WordPress
  • How to Add the Contact Form to Your Website
  • How to View the Google Map in Your Contact Form
• How to Access User Location Data from a Form
• Video Tutorial: How to Embed a Google Map in Contact Forms
• Bonus Resources 🔗: Top Guides for Using Maps in WordPress

Let’s get started!

Steps to Embed a Google Map in a Contact Form

In this tutorial, we will utilize WPForms, the leading contact form plugin for WordPress, which allows you to effortlessly create any type of form using a user-friendly drag-and-drop builder.

WPForms offers a free version that includes all the essential features for creating a basic contact form. However, for this tutorial, we will be using WPForms Pro, which comes with the Google Map addon.

ℹ️ Fun Fact:At CanadaCreate, we rely on WPForms for various tasks, including our contact form and annual reader satisfaction surveys. Our experience has been excellent, and you can find out more in our comprehensive WPForms review.

To get started, the first step is to create an account with WPForms. Visit the WPForms website, click on ‘Get WPForms Now,’ and complete the registration process.

Once registered, you’ll be directed to your WPForms account dashboard, where you can download your WPForms Pro ZIP file and find your license key.

Next, proceed to install and activate the WPForms plugin.

In your WordPress admin area, navigate to Plugins » Add New Plugin.

Use the search bar to quickly locate the WPForms plugin.

In the search results, click the ‘Install Now’ button, then select ‘Activate’ to enable it on your WordPress site.

For further instructions, check out our detailed guide on how to install a WordPress plugin.

After activation, visit the WPForms » SettingsVisit the page to input your license key, which you can find in your WPForms account. Don’t forget to click the ‘Verify Key’ button to activate your license.

Next, navigate to WPForms » Addons and locate the Geolocation Addon.

You can either use the search feature at the top of the page or scroll through the list of available addons.

Once you find it, click the ‘Install Addon’ button.

With the Geolocation addon now activated, you need to configure its settings. To do this, go to WPForms » Settings and select the ‘Geolocation’ tab.

On this page, you will need to choose a geolocation provider.

For this tutorial, we will select the ‘Google Places API.’

Make sure to check the ‘Current Location’ box. This prompts the user’s browser to request their location, allowing the address field to be automatically filled in. This feature saves time and enhances accuracy.

Next, scroll down to the settings for the Google Places API.

Here, WPForms will prompt you to enter your Google API key. You can obtain your key from Google and paste it into the designated input field. We will guide you on how to do this in the next section.

How to Generate a Google Places API Key

To obtain an API key for Google Places, visit the Google Cloud Console website.

Start by selecting your country from the drop-down menu and agreeing to the terms of service. In certain countries, you may also have the option to subscribe to a mailing list.

When you’re ready to proceed, click on ‘Agree and Continue’.

Next, choose a project for your API key. Click on ‘Select a project’ and then choose the desired project from the list.

If you haven’t created a project yet or this is a new website not added to Google, click ‘New Project’ to create one.

You should now be on the ‘APIs & Services’ page, where you can activate the necessary APIs to display Google Maps on your WordPress site.

Click the ‘+ Enable APIs and Services’ button located at the top of the page.

This will redirect you to Google’s API Library, where you need to enable three mapping APIs:

• Google Places API – allows your form to suggest addresses as users type.
• Maps JavaScript API – shows the interactive map on your website.
• Geocoding API – converts an address into precise coordinates so the map can accurately place the pin.

You can locate these by using the search bar at the top or by clicking the ‘View All’ button in the Maps section.

Next, let’s find and enable the Places API. Once you find it, click on it.

On the following page, click the ‘Enable’ button.

After that, repeat the process for the Maps JavaScript API and Geocoding API.

Once you have enabled all three APIs, you can create an API key.

In the left menu, navigate to APIs & Services » Credentials.

From here, click the ‘+ Create Credentials’ button at the top of the screen and select the ‘API key’ option.

Your API key will be generated and shown in a popup window.

Later in this tutorial, you will need to copy that key into the WPForms settings. For now, let’s explore how to set restrictions on the API key.

Setting Restrictions for Your Google Places API Key

Excessive use of the API key may result in moving beyond the free tier, leading to unexpected costs. We advise restricting the key to prevent unauthorized or unforeseen usage.

To restrict the key, click the ‘Restrict Key’ link located at the bottom of the ‘API key created’ popup shown in the screenshot above.

On the subsequent page, you can configure various restrictions. The first option is ‘Application restrictions’.

In this section, select the ‘HTTP referrers (web sites)’ option. This ensures that the key is only utilized on designated websites.

Next, ensure that the key is exclusively used on your own website. To do this, scroll down to the ‘Website restrictions’ section and click the ‘Add an Item’ button.

Now, enter your website’s domain name in the ‘New item’ field using the format *example.com/*.

If you plan to use Google Maps on multiple websites, you can click the ‘Add an Item’ button to include as many domains as necessary.

Having restricted the API key to your own websites, you can further limit its use to only the Google APIs you specified earlier.

Scroll down to the ‘API restrictions’ section of the page and select the ‘Restrict key’ option. This will open a dropdown menu where you should check the boxes for ‘Geocoding API’, ‘Maps JavaScript API’, and ‘Places API’.

After making your selections, click the ‘OK’ link to save your settings.

Finally, ensure you click the ‘Save’ button at the bottom of the page to apply all the restrictions you have set.

Please note that it may take up to 5 minutes for the new settings to take effect.

Integrating the Google API Key into WPForms Settings

You will now see the API key listed along with any other available keys. Click the ‘Copy’ icon to add the key to the WPForms Geolocation settings page.

If you need to modify any of the API’s settings or restrictions in the future, you can click the Edit icon on the right.

Now, return to your website, which should still be on theWPForms » Settings » Geolocationpage.

Once there, paste the key into the ‘Google Places API’ field in the WPForms settings, and make sure to click the ‘Save Settings’ button.

How to Create a Contact Form with an Embedded Google Map in WordPress

After configuring WPForms and Google Places, you are now ready to create a contact form in WordPress.

There are several methods to create your WordPress forms using WPForms.

First, you can start with a blank form. This option allows you to fully customize and arrange form fields from the ground up, making it ideal forfully customized designs.

Alternatively, you can utilize the AI form builder to automatically generate a complete form based on a simple text prompt. This is an excellent time-saver if you’reunsure where to start.

Finally, you can choose from over 2,000 pre-designed form templates. Whether you need a contact form, survey, booking form, or something more complex, there’s likely a template that suits your requirements!

Begin by following our comprehensive guide on how to create a contact form in WordPress.

After creating a basic form, you will need to include an address field. You can choose between an Address block or a Single Line Text field.

In this tutorial, we will utilize a ‘Single Line Text’ field. Simply drag the ‘Single Line Text’ block onto your form.

Next, we will customize the settings of the field.

To do this, click on the field to access the Single Line Text settings.

First, change the label of the field to ‘Address’. This will clearly indicate to users what information they should enter.

Next, adjust the field’s settings to ensure it displays a map on the WordPress form. Click on the Advanced tab to proceed.

In the Advanced settings, locate the ‘Enable Address Autocomplete’ option at the bottom and switch it to ‘On’.

You will then see an additional option, ‘Display Map’, which you should also activate. You can choose to position the map either above or below the field.

Integrating the Contact Form into Your Website

The easiest way to add the contact form to your website is by clicking the ‘Embed’ button located next to the ‘Save’ button at the top of the form editor.

You will be prompted to choose whether to add the form to an existing page or to create a new one.

For this tutorial, we will select the ‘Create New Page’ option.

First, name your page and click the ‘Let’s Go!’ button to proceed.

A new page with your chosen name will be created, and your contact form will be added automatically.

Simply click the ‘Publish’ button to make your page live.

How to View the Google Map in Your Contact Form

When users access your contact form, they will be prompted to allow your website to access their location.

If they click ‘Allow’, their current location will be filled into the address field, and a pin will be placed on the map at that location.

This autocomplete feature helps your visitors save time by making it quicker and easier to enter their addresses.

If users need to modify the address, they can easily type a new one or drag the pin to a different spot on the map.

How to Access User Location Data on a Form

After enabling geolocation, WPForms will record each user’s location upon form submission. Understanding your users’ locations can help you identify better leads.

To view this data, navigate to WPForms » Entries and select your contact form.

You will now see a list of entries submitted by users for that form.

To access a specific form submission, simply click the ‘View’ link located on the right.

You will now see the submitted form data from the user, including their name, business email, and business phone number, as well as some location information.

This information includes a pin on Google Maps, the user’s location, zip code, and country. Please note that the accuracy of this data depends on the user’s device; GPS data from mobile devices is typically very accurate, while IP-based location from desktop computers may be less precise.

If the user did not allow the form to access their location, then no location data will be shown.

That’s it! You have successfully integrated a Google Map into your contact form in WordPress. You can also utilize WPForms to create surveys, set up payment forms for online transactions, and more.

Bonus Resources 🔗: Top Guides for Using Maps in WordPress

We hope this tutorial has helped you learn how to embed a Google Map in contact forms. You may also want to explore some of our other guides on using maps on your website:

• A Comprehensive Guide to Adding Google Maps in WordPress
• Step-by-Step Instructions for Adding a Google Maps Store Locator in WordPress
• Detailed Guide to Embedding Bing Maps in WordPress
• How to Create an Interactive Map in WordPress
• Top Google Maps Plugins for WordPress (Many Free Options Available)
• Best Mapbox Plugins for WordPress Users
• Top Geolocation and GeoIP Plugins for WordPress

If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress tutorials. Connect with us on Twitter and Facebook.