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

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

Notify of
avatar

M. Wellness
Guest
M. Wellness
3 days 19 hours 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
1 day 12 hours ago

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

NHL ONLINE SHOP
Guest
NHL ONLINE SHOP
1 month 25 days ago

if my address is 1/152 sunset Road, Unsworth Heights, Auckland, New Zealand then how can i make it fill out on each section? it just fills out on street address leaving other field blank

NHL ONLINE SHOP
Guest
NHL ONLINE SHOP
1 month 24 days ago

I did.For eg. Class1 class2 class3 Then in the class I didClass1,class2,class3

WPBeginner - WordPress Tutorials
Guest
WPBeginner - WordPress Tutorials
1 month 24 days ago

You would need to add the class for each field you want it to fill out and that should fix the issue

18TommyBoy
Guest
18TommyBoy
2 months 29 days ago

Good, but to me nothing popup :/ 🙂

18TommyBoy
Guest
18TommyBoy
2 months 26 days ago

Aaaaa I have 🙂 ID must too insert, but in video is no! THX THX HTX

18TommyBoy
Guest
18TommyBoy
2 months 26 days ago

how? ID must too?

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

you shouldn't need https, you may want to check with the plugin's support.

18TommyBoy
Guest
18TommyBoy
2 months 28 days ago

Yes its that element. Must have https too on page?

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

You may need to ensure you are targeting the correct element

Samantha James-Tharp, PA
Guest
Samantha James-Tharp, PA
3 months 14 days ago

Hi thanks for the info ??? Also do the labels need to be named address, city and state to work? Can it just be a text field? Wanting a one line address form. I did everything you stated but using the one line text did not work.

Samantha James-Tharp, PA
Guest
Samantha James-Tharp, PA
3 months 14 days ago

WPBeginner – WordPress Tutorials thanks for the quick response but I have been trying to get right all day is there anyway you could do a tutorial using Contact 7. I was using just the text field for a one line address then I tried multiple lines but I just can't figure it out. Thanks in advance.

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

The labels shouldn't, you may want to ensure you are adding the correct class/ID for the input box.

Muhamad Farchan Fathurrahman
Guest
Muhamad Farchan Fathurrahman
3 months 19 days ago

Hi, nice video there. Informative indeed.Does it also work for all countries ?

Muhamad Farchan Fathurrahman
Guest
Muhamad Farchan Fathurrahman
3 months 19 days ago

thanks

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

it should work for all countries

Saliou Dyallo
Guest
Saliou Dyallo
3 months 22 days ago

Yep Yep, another wonderful vidéo 🙂

Imran Khan
Guest
Imran Khan
3 months 22 days ago

Thanks so much! Really helpful video!!!

Neeraj Kumar
Guest
Neeraj Kumar
3 months 22 days ago

is it only for address fields?

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

For this yes it is

wpDiscuz