Published on April 3, 2017 by WPBeginner

Users have asked us how to add autocomplete for address fields in their WordPress forms. Autocomplete allows your visitors to quickly select an address form suggestions generated in realtime as they type. In this video we’ll show you how to add autocomplete for address fields in WordPress using the Google Places API.

Text version of this tutorial:
www.wpbeginner.com/plugins/how-to-add-autocomplete-for-address-fields-in-wordpress/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
www.facebook.com/wpbeginner

Follow us on Twitter:
twitter.com/wpbeginner

Join our circle on Google+:
plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
www.wpbeginner.com/

Summary of this tutorial:

For this tutorial we will be using the plugin: Address Autocomplete Using Google Place API.

Address Autocomplete Using Google Place Api

With the plugin activated you will go to Settings, Google Autocomplete to configure the plugin’s settings.

It will ask for your Google Places API Key, the key allows your website to connect with Google Maps and retrieve autocomplete suggestions from their database.

You will want to visit Google’s Developer console website and create a new project, the developer console website can be found here:

console.developers.google.com/apis

Provide a name fir your project, we would recommend one that lets you identify what it is for.

You should automatically be redirected to your new project which lists the popular Google APIs you can use in your project.

Select the Google Places API key and press the enable link near the top of the page.

Click the create credentials for you to be able to use the API, as well as the What credentials do I need button, and you should see the API key you need to copy over to your WordPress plugin.

For your project you will also need to go to your library and also enable the Google Maps Javascript API and press the enable link in there as well.

You can add the autocomplete to any field in a form plugin by viewing the page the form is on and right clicking to inspect element the object.

Copy the name, ID, or CSS values for the field and paste it into the settings page.

If you would like to select multiple fields just add a comma for adding the new ID/name.

Leave a Reply

56 Comments on "How to Add Autocomplete for Address Fields in WordPress"

Notify of
avatar

Allan Diniz
Guest
Allan Diniz
2 months 19 days ago

Hi!! How do I limit in just one country?

Jada Docs
Guest
Jada Docs
1 month 25 days ago

Hi Allan, did you manage to establish a fix for this question? If so, please post your finding as this might help others. It sure will help others as I have the same question.

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
2 months 19 days ago

You would want to reach out to the plugin's support for if that would be an option 🙂

Edmond Cox
Guest
Edmond Cox
3 months 2 days ago

Will this work on contact form 7? NOT PRO Verson

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
3 months 2 days ago

It should

Kolay Flooring International
Guest
Kolay Flooring International
3 months 9 days ago

I installed Address Autocomplete Using Google Place Api on my website using gravity forms. But i cant seem to get it to work fully. It is able to add the address to the first field but is not populating the rest of the address fields. Please help me

Kolay Flooring International
Guest
Kolay Flooring International
3 months 10 days ago

I followed all instructions but it is not filling out all fields. It is only filling out the address field. Not the city, state, zip, etc. How can I fix this?

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
3 months 9 days ago

For multiple fields we would recommend reaching out to the plugin's support for if that is available: wordpress.org/support/plugin/address-autocomplete-using-google-place-api

I Love Houses
Guest
I Love Houses
3 months 10 days ago
This was a very helpful video. I'm trying to do the same thing on my website but also integrating it with a optin form to gather more information from the visitor. So when they start entering the numbers of their address google finds the closes matches from there api location and auto fills in the most likely addresses that would be theirs in the drop down for then to select. Then they can fill out the rest of the form with contact info before submitting  it.  do you know the best contact form to use with WP and accomplish what… Read more »
WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
3 months 10 days ago
Bruno Machado
Guest
Bruno Machado
3 months 19 days ago

Cool tutorial! But what if I want the autocomplete to work on a text field on the Dashboard itself? Is it possible?

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
3 months 18 days ago

It is possible but we do not have a plugin we would recommend for that purpose at the moment.

Manoj Saini
Guest
Manoj Saini
4 months 24 days ago

Video learn way Asome

Manoj Saini
Guest
Manoj Saini
4 months 24 days ago

Video learn way Asome

M. Wellness
Guest
M. Wellness
8 months 30 days ago

Seems don't work for me. My class field are things like this: class="input-text" I have to copy and paste this? input-text?

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
8 months 27 days ago

Correct, but if it has other less general things like an ID that could be better

M. Wellness
Guest
M. Wellness
8 months 30 days ago

Seems don't work for me. My class field are things like this: class="input-text" I have to copy and paste this? input-text?

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
8 months 27 days ago

Correct, but if it has other less general things like an ID that could be better

1 2 3
wpDiscuz