How to Add Autocomplete for Address Fields in WordPress

How to Add Autocomplete for Address Fields in WordPress


Hello and welcome to WPBeginner. In this video I’ll walk you through how to add autocomplete for address fields in a WordPress form. If you’re having someone fill out their address on a form field then this is a great way to make that task simple and easy for your reader and this is just a little action that you can do that will separate your site from the rest. Now before we begin make sure that you have a Google account because we’ll need to use that with the plug-in that we’ll install also I’m using WPForms plugin for my contact form but this can work with any form that you have on your WordPress website so if you’re ready let’s begin. From our WordPress dashboard let’s head down to plugins add new we’re looking for a plug-in called address autocomplete using Google Places API. This is the one we want so let’s install that and once it’s finished installing let’s go ahead and activate it as well. Once activated we can head over to the Google autocomplete under settings and I’ll show you what it’s looking for we’ll need to fill out a Google place API key and that’s where having the Google account comes in. Let’s open up a new tab. go to console.developers.google.com If you’ve never created a Goolge project then you might not see this but you’ll just want to go to the drop-down up here then click create project. Give it a good name and click create. Now there’s two API’s we want to enable on this and I’ll show you those two right now, they’ll both be under the Google maps api. The first one we want to look for is we’re looking for the Google Places API web service, we want to enable it up here, we’ll also need to create a credential we’ll click the Create credentials button, from the drop-down we just want it to be the Google Places API web service that’s the one that we’ll be using. So once I click on the what credentials do I need then we get the api that we’re looking for. I’m going to copy this we’ll head back over to where we left off and we’ll paste that api key here. I need to do one more thing for my Google APIs so I’m going to go back over to the credentials, click done with that, but we need to head back over to the library so we can enable one more API. We want the Google Maps JavaScript API do the same thing here we’ll just enable it for this one we won’t need to create API key that’s all we’ll need for there. Now we’re done with the console developers I’m going to head over, I want to show you the form that will be working with you’ll want to pull up the form that’s on your website as well because we need to grab some data from the forms so we need to right click on the first address field right click and click inspect it’ll pull up the split screen for you you see this form filled with all the information here we need to copy the class of the form so if I double click on that class it highlights so I can right click copy and now let’s go back to our autocomplete area and let’s paste that here. You can keep doing that for all of the fields that are for your address you could do that for the city and the state if you want you just want to add a comma beside it. I’m going to do that for the city as well, copy that, head back over after the comma let’s right click and we’ll paste it. So we have two of them now let’s save that. After we save that let’s head back over to the contact form I’m going to refresh it and you’ll see when I start to put in the information it shows the drop down and now when a user fills out their address then this will automatically drop down it’ll make it easier for them to fill out. Did you learn something helpful from today’s video? If so make sure you subscribe to our YouTube channel right now. Just click on the subscribe button right here and thanks for watching

35 thoughts on “How to Add Autocomplete for Address Fields in WordPress

  1. 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.

  2. 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

  3. 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?

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

  5. 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 we are talking about here? Gratefully.

  6. 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?

  7. 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

  8. this is great . my form doesnt have unique id or class and worked by name of element thanks to all builders and recorder and instructors

  9. Hi mam how to give auto location In our website help me out please for example like this website 👉www.foodwings.in

  10. I have done like this video explains, very informative, but it still does not seem to work

    wpcf7-form-control wpcf7-text wpcf7-validates-as-required
    wpcf7-form-control-wrap Adress

    it still does not work 🙁 either of the two my full inspect looks like this

    <span class="wpcf7-form-control-wrap Adress">
    <input name="Adress:" class="wpcf7-form-controll-wpcf7-text
    wpcf7-validates-as-required" aria-invalid="false"
    aria-required="true="text" size"40" placeholder=" Konditorivägen 3, Östersund" value="" />

  11. Video is pretty clear,
    Tried with Contact From 7, didn't work.
    It does work with WPForms.
    Is there any way I can restrict the address autocomplete to a specific country?
    I see the autocomplete does not bring up zip/postalcode….
    Anyway we can tweak this plugin to start search and autocomplete using a postalcode?
    Thanks

  12. Followed the instructions and it works…. except in the video you do not show the end result, my results are that the address is plotted in 1 line, the different fields don't get filled out…..

  13. great help. But I need current location which symbol is plus sign. How can I enable current location in text field?

  14. Will this work for countries outside the US for example SA? Or do we need to change some of the settings etc. to be able to prioritise our own country when looking up addresses?

  15. Great video! i have been looking for something like this. Can i ask if this will work for a one line address autocomplete (one field only) rather than separate address fields? It looked like in your example in the first address field google provided a full match for the entire address, yes?

  16. I have a wpuf plugin form in that form i have location field i tried as you showed, its not working locally.

  17. Hey guys, all the results are for other countries. Is there anyway to limit it to Australia? Where all my customers are?

  18. Hello, since Google has made many changes in the implementation of different kind of APIs, like you have to set quota and then billing and and all.can you please make a video on the recent update made by Google for these APIs

  19. Hi! Do you know how can I make a field that locates automatically the location of the user using google API ? I want it for a booking form when the tourist does not know his exactly location for the address. Thank you!

  20. Hey – this is great! This plugin allows for an auto-suggest type feature. Is there a complete auto-fill based on Geo location?

Leave a Reply

Your email address will not be published. Required fields are marked *