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