How to Embed a Google Map in Contact Forms

June 28. 2022

If you’re running a successful website, chances are you’re looking for ways to improve your user experience and attract more visitors. We at WP Full Care fully understand how these things are essential for your business and that’s why we’ll show you how to embed a Google Map in your contact forms. It might not sound like much but details like this one can do wonders for luring more visitors to your website. Now let’s get to work!

Reasons why you should embed a Google Map in your contact forms

There is a good probability that, when you set up your website on WordPress, you included a contact form for site visitors to use in order to get in touch. You wanted to make it easier for your potential customers to ask questions about the goods and services you offer. In addition, if your company has a physical presence, you have most likely included a Google Map of that area on your website in order to entice customers to shop at your establishment.

However, you can and should embed a Google Map in your contact forms, too. Here are the main two reasons why:

• You can utilize geolocation to automatically fill in the address field on your contact form, and you can even display the user’s position on a map using this feature. However, many website owners of businesses are unaware of this feature. This enhances the user experience overall and helps reduce the number of people who leave their form submissions.
• If you know where your users are located, you may use geolocation targeting to provide more customized content to them. This can really help you can increase conversion rates.

Adding a Google Map to your contact forms is quite easy and further in this article, we’ll let you know how to do it. Of course, you can always choose the easiest way and have this done as a part of your personalized website support.

A simple way to embed a Google Map in your contact forms

The easiest way to embed a Google Map in your contact forms is to use the WP forms plugin which is widely considered to be the premier contact form plugin for WordPress. Using an intuitive drag-and-drop interface, the form builder makes it possible to quickly and easily design any kind of form.

There is a free version of WPForms that can be downloaded, and it comes equipped with all of the functionality necessary to make a simple contact form. However, since WPForms Pro already comes with the Google Maps extension, we’ll be using that instead for this lesson.

Installing and activating the WPForms plugin is the first thing on your list of things to accomplish. Next, locate the Geolocation Addon by going to the WPForms » Addons menu option. You have the choice of using the search bar that appears at the top of the screen. After you have located it, you should click the “Install Addon” option in order to begin the add-on installation process.

Next, you will be tasked with configuring the addon’s parameters. To accomplish this, go to WPForms » Settings and then select the Geolocation tab from the drop-down menu. You will be prompted to choose a geolocation provider on the following page. In light of this piece’s focus, we’ve decided to utilize the Google Places API.

The next step is to locate the Google Places API settings by scrolling down the page. There, you’ll need to provide your Google API key. You can receive your key from Google, then copy and paste it into the field. Now let’s find out how to improve your contact forms with Google Maps.

How to create contact forms with embedded Google Map in WordPress?

Once you configure WPForms and Google places, it’s time to create a contact form and embed a Google Map in it. After you create a basic form, you will need to include a field for the address. You have the option of using either a Single Line Text field or an Address Block. We’ll be using a Single Line Text field for the sake of this tutorial.

In the following step, we will configure the field’s settings. To accomplish this, you will need to click on the field to see the parameters for the Single Line Text format. To begin, you need to alter the label of the field so that it reads “Address.” Your users will have no trouble understanding what it is that should go into the field if you do this.

After that, you’ll need to adjust the settings of the field so that it shows a map and to do this, you will need to select the Advanced tab. When you get there, go all the way to the bottom of the settings and look for an option called “Enable Address Autocomplete”. Toggle that option so that it is set to “On”. After that, you will see a new option that says “Display Map” which is another feature that you should activate. You have the option of displaying the map either on top of or beneath the field.

How to add a contact form to your website?

Clicking the button labeled “Embed” is the quickest and easiest way to incorporate the contact form into your website. You can locate it at the top of the form editor screen, directly next to the button labeled “Save”. You are going to have the option of either adding the form to an already existing page or creating a new one.

Simply select the “Create New Page”, give the page a name, and click the button that says “Let’s Go!” – it’s as simple as that! This way, you’ll create a new page with a name of your choice to which your contact form will be instantly attached. Don’t forget to click on “Publish” and you’re officially done!

The bottom line

As you can see, it’s very simple to embed a Google Map in contact forms. The WP Forms plugin is very straightforward and makes any forms related tasks simple even for beginners. Of course, you don’t have to do any of this on your own if you reach out to WordPress experts. They’ll ensure your website is running smoothly and that the number of your visitors is only increasing!