How to Add Autocomplete for Address Fields in WordPress

How to Add Autocomplete for Address Fields in WordPress

September 12, 2019 35 By Bernardo Ryan


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