If you’ve set up a business website on WordPress, you must be having a contact form on your website so that visitors can get in touch with you if they want. Also, you must be having the Google Map in the contact form that displays your business’s location on the map.
But what your contact form might not be having is the ability for the users to include their exact location using Google Maps. This is possible via the geolocation technology. Instead of manually entering the address, the users can turn on geolocation which automatically reads their current address.
In this article, learn how you can enable this feature in Google Maps for your WordPress website.
Embedding a Google Map in Contact Form
To get started with embedding Google Map, you’d need to use a form builder plugin like WPForms. It allows you to create forms and include Google Maps along with it.
While WPForms has a free version, the Google Map addon is part of its pro package. Therefore, you need to purchase a paid plan and get the license key.
Then here are the steps you need to follow:
After WPForms is installed, go to WPForms > Settings. Here you need to enter the license key to unlock the full features of the plugin. Click on the ‘Verify Key’ option after you’ve entered the license key to activate.
The other thing you need to activate is the Geolocation Add on. It is available within the plugin in WordPress. Go to WPForms > Addons and scroll down till you find Geolocation. Click on the ‘Install Addon’ button.
After installing the addon, go back to the Settings page to configure it. In WPForms > Settings, you need to open the Geolocation tab. For the provider, you need to select ‘Google Places API’. Also, you need to tick the ‘Current Location’ checkbox. It’d detect the location and auto-fill it in the address box.
Scrolling down further will take you to the Google Places API settings. For Google Maps to detect location, you must generate an API key and use it. That’s explained in the next step.
In the next section, create a project where the API key will be used by clicking on ‘New Project’. Or if you already have projects running, select a project instead by clicking on ‘Select a Project’ button.
Once you create a project, you’ll be taken to the Google’s API Library. Here you need to activate three different APIs that are used for mapping. Access those links by clicking on the ‘View All’ button.
First, locate the Places API. Click on it and then Enable to enable the API. Repeat the process for Javascript API and Geocoding API.
Now that all the three necessary APIs are enabled, you can generate the API key.
On the left-hand side menu, go to APIs & Services and then into Credentials. Find and tap on the ‘+Create Credentials’ at the top of the screen and then click on ‘API Key’. A popup screen will open that’ll contain the Google Places API key.
Copy the API Key to the clipboard for later use.
For that, you need to tap on the ‘Restrict Key’ button at the bottom of the popup window. In the next section, you need to configure those restrictions.
First, go to the ‘Application restrictions’ section and tap on the ‘HTTP referrers (web sites)’ button. Now the key will be limited to use only on the websites and not on any apps.
The next thing you need to ensure that it’s used only on your website and not on others. So scroll down till you see the ‘Website restriction’ section. Here, click on the button that reads ‘Add an Item’. Then, enter your domain name in the ‘New Item’ field.
In case you’re using Google Maps on multiple websites, click on ‘Add an Item’ button once again and enter the domains.
The third thing you need to restrict is the ‘API restrictions’. So scroll down till you come across this section and tap on the ‘Restrict key’ option. From the drop down menu, select Geocaching API, Maps JavaScript API, and Places API. No other API can use the key now.
Click on ‘OK’ to store the changes and then on ‘Save’ at the bottom to apply these changes. Doing so will also activate the restrictions you’ve opted for.
Now, return back to the website and navigate to WPForms > Settings > Geolocation. Here, paste the API Key under the Google Places API field. Then, click ‘Save Settings’ to save the changes made.
Go ahead and create a basic form with all the fields like name, email address, phone number, and address. Now, we need to customize the address field so that it includes Google Maps.
For this tutorial, we’re assuming you’ve used Single Line Text field for the address field.
First, you need to change the label to ‘Address’. This will provide clarity to the users that they need to input their address in this field. Next, click on the ‘Advanced’ tab and toggle the button for ‘Enable Address Autocomplete’ option. It will open another sub-option called ‘Display Map’. You’d have to enable this as well.
Now you’ll be able to see the Google Maps on the contact form. You can adjust its position by placing it above or below the address field.
The easiest method is to open the form editor screen and click on the ‘Embed’ option at the top. In the next screen, you can either add it to an existing page or a new page. After you make the selection, the form will be added automatically.
Now hit ‘Publish’ to make the contact page go live. Visit the contact page from another tab or browser and you’ll see the contact form along with Google Maps. The browser will ask for your permission to access your current location. Allow it to automatically fill up the address field. You’ll also notice that a pin will get added to the map, which points to your location.
So that’s how you add Google Maps to your Contact form in WordPress.
But what your contact form might not be having is the ability for the users to include their exact location using Google Maps. This is possible via the geolocation technology. Instead of manually entering the address, the users can turn on geolocation which automatically reads their current address.
In this article, learn how you can enable this feature in Google Maps for your WordPress website.
Embedding a Google Map in Contact Form
To get started with embedding Google Map, you’d need to use a form builder plugin like WPForms. It allows you to create forms and include Google Maps along with it.
While WPForms has a free version, the Google Map addon is part of its pro package. Therefore, you need to purchase a paid plan and get the license key.
Then here are the steps you need to follow:
- Install and Activate WPForms
After WPForms is installed, go to WPForms > Settings. Here you need to enter the license key to unlock the full features of the plugin. Click on the ‘Verify Key’ option after you’ve entered the license key to activate.
The other thing you need to activate is the Geolocation Add on. It is available within the plugin in WordPress. Go to WPForms > Addons and scroll down till you find Geolocation. Click on the ‘Install Addon’ button.
After installing the addon, go back to the Settings page to configure it. In WPForms > Settings, you need to open the Geolocation tab. For the provider, you need to select ‘Google Places API’. Also, you need to tick the ‘Current Location’ checkbox. It’d detect the location and auto-fill it in the address box.
Scrolling down further will take you to the Google Places API settings. For Google Maps to detect location, you must generate an API key and use it. That’s explained in the next step.
- Generate Google Places API Key
In the next section, create a project where the API key will be used by clicking on ‘New Project’. Or if you already have projects running, select a project instead by clicking on ‘Select a Project’ button.
Once you create a project, you’ll be taken to the Google’s API Library. Here you need to activate three different APIs that are used for mapping. Access those links by clicking on the ‘View All’ button.
First, locate the Places API. Click on it and then Enable to enable the API. Repeat the process for Javascript API and Geocoding API.
Now that all the three necessary APIs are enabled, you can generate the API key.
On the left-hand side menu, go to APIs & Services and then into Credentials. Find and tap on the ‘+Create Credentials’ at the top of the screen and then click on ‘API Key’. A popup screen will open that’ll contain the Google Places API key.
Copy the API Key to the clipboard for later use.
- Restrict use of Google Places API Key
For that, you need to tap on the ‘Restrict Key’ button at the bottom of the popup window. In the next section, you need to configure those restrictions.
First, go to the ‘Application restrictions’ section and tap on the ‘HTTP referrers (web sites)’ button. Now the key will be limited to use only on the websites and not on any apps.
The next thing you need to ensure that it’s used only on your website and not on others. So scroll down till you see the ‘Website restriction’ section. Here, click on the button that reads ‘Add an Item’. Then, enter your domain name in the ‘New Item’ field.
In case you’re using Google Maps on multiple websites, click on ‘Add an Item’ button once again and enter the domains.
The third thing you need to restrict is the ‘API restrictions’. So scroll down till you come across this section and tap on the ‘Restrict key’ option. From the drop down menu, select Geocaching API, Maps JavaScript API, and Places API. No other API can use the key now.
Click on ‘OK’ to store the changes and then on ‘Save’ at the bottom to apply these changes. Doing so will also activate the restrictions you’ve opted for.
- Add Google API Key to WPForms Settings
Now, return back to the website and navigate to WPForms > Settings > Geolocation. Here, paste the API Key under the Google Places API field. Then, click ‘Save Settings’ to save the changes made.
- Create a Contact Form using WPForms
Go ahead and create a basic form with all the fields like name, email address, phone number, and address. Now, we need to customize the address field so that it includes Google Maps.
For this tutorial, we’re assuming you’ve used Single Line Text field for the address field.
First, you need to change the label to ‘Address’. This will provide clarity to the users that they need to input their address in this field. Next, click on the ‘Advanced’ tab and toggle the button for ‘Enable Address Autocomplete’ option. It will open another sub-option called ‘Display Map’. You’d have to enable this as well.
Now you’ll be able to see the Google Maps on the contact form. You can adjust its position by placing it above or below the address field.
- Add Contact Form to your Website
The easiest method is to open the form editor screen and click on the ‘Embed’ option at the top. In the next screen, you can either add it to an existing page or a new page. After you make the selection, the form will be added automatically.
Now hit ‘Publish’ to make the contact page go live. Visit the contact page from another tab or browser and you’ll see the contact form along with Google Maps. The browser will ask for your permission to access your current location. Allow it to automatically fill up the address field. You’ll also notice that a pin will get added to the map, which points to your location.
So that’s how you add Google Maps to your Contact form in WordPress.
