Wish Google would autofill address fields in your form? Here's how to integrate Google Maps with WordPress so you can harness that geolocation goodness!
We don't know about you, but we take Google's address autocomplete functionality for granted. In fact, we tend not to notice it until we fill out a form that doesn't have it.
It's annoying to have to type out a full address, isn't it? ?
Luckily, it's easy to add Google autocomplete to address fields in forms. And today, we'll show you some simple steps to make sure your website visitors never experience that pain!
Plus, this way of connecting Google Maps to your WordPress forms also lets you display a map right inside your web form! All without having to spend hours coding. Cool, huh?!
So, shall we get globetrotting? ?
Before we jet off ?, perhaps we should learn a little more about where we're heading first.
Google address autocomplete & Google Maps API FAQ
Things can get confusing quick when it comes to connecting your website to Google. So, let's take a minute to cover some common questions.
What is a Google Maps integration?
A Google Maps integration allows visitors to see the location of an address using Google Maps within the website, online form, or mobile app they're using. Thanks to the Google Maps API, they never have to leave your page to search on Google Maps.
It also adds a lightning-fast address autocomplete service that fills in any missing address components while the user types the address into a form.
Why use a geolocation plugin for my WordPress forms?
Using a Google WordPress geolocation plugin is an easy way to improve your website's User Experience (UX). Adding interactive maps and address autocomplete also increases engagement, helps visitors fill out forms faster, and gives you more accurate addresses.
Is Google Maps API & address autocomplete free?
Using a Google Maps layout on your website is free for most basic uses. Google address autocompletes start at $2.83 per 1,000 requests; the API comes with $200 pre-credits per month.
How do I add autocomplete to address fields in WordPress?
To add Google Maps or Google address autocomplete to WordPress forms, you only need two things:
- a Google Maps API key and
- Formidable Forms Business or Elite
We'll tell you where to get a Google Maps API key in a minute. But first, if you don't already have the premium version of our WordPress form maker, click the button below!
Alright, got your license and ready to hit the road? ?️ Let's roll!
Add Google Maps & Google address autocomplete to forms in WordPress
Step 1: Install the Formidable WordPress Geolocation add-on
Formidable's WordPress Geolocation plugin lets you use the Google Maps API to get accurate addresses from your online forms. To access these helpful features, you'll need to go to the Formidable → Add-ons page and click the Install button for Geolocation.
Step 2: Enter your Google Maps API key
You'll need a Google Maps API key to start using Formidable Geolocation. For Google Maps APIs, free use is limited to 28,000 map views and up to $200 worth of daily geolocation requests. Using an API key and setting up billing is required by Google for this service, even if you never need to pay.
You can access your Google Maps API key by signing in to the Google Developers Console. There, create a new project. At the top of the page, select Enable APIs and Services:
This will take you to the API Library. Then, enable Geocoding API, Google Maps JavaScript, Places API. Next, go to APIs & Services → Credentials → Create Credentials. As the key type, select API key:
After creating your Google Maps (aka Google Places) API key, you'll have to add your billing information.
We recommend setting up automated billing to avoid any problems with geolocation limits. You can find more details on the Google Places API here.
Lastly, go back to your WordPress dashboard. Navigate to Formidable → Global Settings and find the Geolocation tab:
In the text box, enter your Google Maps API key. You can now move on to the final step.
Step 3: Add an autofill address form field
Now that you've covered the plugin settings, you can add geolocation to a form. First, go to Formidable → Forms and either add a new form or edit an existing one. This will open a form editing page.
To add geolocation autofill to the form, you'll need to drag and drop either a text field or an address field into the form.
For either of these fields, open the Field Options and select both Add address autocomplete and Show map.
Adding address autocomplete lets visitors see a list of generated options as they type an address.
And by including a map, they'll be able to see the location they searched for in real-time on a Google Map. They can even move the pin to select a different address or view nearby points of interest.
When you're done customizing the form, you can preview it to test that the geolocation feature is functioning properly.
Then, you can use the Formidable WordPress block to easily add it to any widget, post, or page.
You can also embed the form on any website.
Did you know?
All the hardwork is done for you with our Google Autofill Address Form template! Just click, and you're done!
Are you eager to add autocomplete to address forms?
Whew, what a trip! ? While it may not have been the most life-changing journey, we do hope it'll help you change your website for the better!
With Formidable Forms, it's easy to add Google address autocomplete to any of your online forms. All you need is a single plugin.
To review, here’s how you can add address autocomplete to WordPress forms:
- Install the Formidable Geolocation add-on.
- Enter your Google Maps API key.
- Add location autocomplete to a field.
But did you know that Formidable Forms can do even more? It also safely stores all your form entries in a searchable WordPress database. And you can display form data as charts, graphs, or maps with Formidable Views, too!
Still aren't sure our WordPress form maker plugin is the best way to add autofill address fields? You can give it a try risk-free for 14 days! If you don't love it, we'll refund you. No questions asked!
Add Address Autofill To Your Forms Now!
WordPress Forms for Zapier: The Ultimate Integration
Authorize.net vs Stripe: Which Is Right for Your Site?
How To Create An Appointment Booking Form in WordPress
Leave a Reply