Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Autocomplete for Address Fields in WordPress

Recently, one of our users asked us how to add autocomplete for address fields in WordPress forms. Autocomplete allows users to quickly select address from suggestions generated in realtime as they type. In this article, we will show you how to add autocomplete for address fields in WordPress using Google Places API.

How to add autocomplete to address fields in WordPress

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Address Autocomplete Using Google Place Api plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Google Autocomplete page to configure plugin settings.

Autocomplete address field plugin settings page

You will be asked to enter Google Places API Key. This API key allows your website to connect with Google Maps and retrieve autocomplete suggestions from their database in realtime.

Head over to Google Developer Console website and create a new project.

Create a new project

A popup will appear asking you to provide a name for your project. Use a name that will help you later identify the project and then click on the create button.

The popup will disappear, wait for a few seconds and you will be automatically redirected to your new project.

Now you will see the list of popular Google APIs that you can enable for your project. You need to locate and click on ‘Google Places API Web Service’.

Select Google Places API

This will take you to an overview page explaining how this API works. You need to click on the Enable link to continue.

Enable Places API

Developer console will now enable Google Places API for your project.

However, you will still need credentials to use the API on your website. So go ahead and click on the create credentials button to continue.

Get API credentials

On the next screen, you need to click on ‘What credentials do I need?’ button.

What credentials do I need

Developer console will now show you the API key. You need to copy this key and paste it under the plugin settings on your WordPress website.

Copy API Key

You still need to enable another API on your Google Developers project. Click on the library in Google Developer Console and then click on ‘Google Maps JavaScript API’.

Google Maps JavaScript API

This will take you to API’s overview page where you need to click on the ‘Enable’ link to continue.

Enable JavaScript API

This API doesn’t need an extra API key, so you are now good to go.

Enabling Autocomplete Address in WordPress Form Fields

You can add autocomplete address feature to any form field created by any WordPress form builder plugin.

We will be using WPForms in this tutorial. However, these instructions will work no matter what contact form plugin you are using.

First you need to create a form that has an address field or a set of address fields.

Once you are done, add this form to your website like you would normally do.

Next, go to the post or page where you added your form. You need to right click the address field and select ‘Inspect’ from browser menu.

Inspect form address field

You will see the name, ID, and CSS class values for the address field.

For example, in this screenshot our form’s name value is wpforms[fields][9][address1], ID value is wpforms-352-field_9, and css class is wpforms-field-address-address1.

You need to copy just one of these values and paste it in plugin settings page.

If you want to target multiple fields in multiple forms, then you can just add a comma and add another value.

Target address fields in your form

Don’t forget to click on the save button to store your changes.

That’s all, you can now visit your form page and try entering an address. The form field will automatically start showing suggestions using Google places and Google Maps.

Address autocomplete preview

We hope this article helped you learn how to add autocomplete for address fields in WordPress. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

22 CommentsLeave a Reply

    • Thank you for letting us know, we’ll be sure to take a look and find an alternative.


    • Hi Vinod,
      Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields


  1. It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site

  2. I have a travel site, tours and transfers, I would like to install this tool, when the client selected the place of visit and the arrival was not transferred, or tour, but it is not a contact form, but rather a search form, does it work? I put the class, did everything correctly, it still does not work. Can someone help me?

  3. Hey, I tried a lot with getting API. It works fine when i use custom code from google on code pen. But when i put the same API on this plugin, it doesn’t work.

    I have enabled two APIs – Places Web and Maps JS with credentials on Places Web.

    What am i missing here


  4. Curious to know how to set a default country to appear first (instead of the default US addresses). Do you have any idea if there is a shortcode or some way to do this with this plugin?

    BTW, I got the plugin working by just adding into the “Name” field. It works fine for me apart from wanting it to show AU addresses first. :)

  5. How to populate the ‘current location’ in ‘area/neighborhood ‘ select dropdown as the first select option (rest of the options coming from the database) ?

  6. Hi there thanks for the article. I have followed the process you described but I still cannot get autocomplete to work at all. Is there something wrong with my google developers account ? as I can see the 2 APIs are enabled but cannot see any requests. Thanks

  7. I found a bug. When you type in the name of the business, the auto-completed address does NOT include the street number, only the street name (Main St, not 123 Main St). Big problem!!!

  8. If there is one thing we are mindful; it’s the ‘mission creep’ of Google into websites and related app areas.

    Where able, we try not to engage google into our sites so as to remain ‘in control’ in what we do.

    But thanks for the insight …

  9. Can it be possible to have the autocomplete fill out the zipcode, state and country as well? I just followed everything here and the address populates automatically but the user still has to manually input their zip code, state, and city

  10. Excellent article for autocomplete. I was looking for such a easy to go method and you guys made it.
    Autocomplete really saves a lot of time for end users which ultimately contributes to user friendly environment.

    Keep it up guys.
    Thank you

  11. I’m planned to create WP form with autocomplete, but I don’t know how to do that. After reading this post, I have an idea to create auto-complete forms.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.