WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Autocomplete for Address Fields in WordPress

How to Add Autocomplete for Address Fields in WordPress

Last updated on April 3rd, 2017 by Editorial Staff
238 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

238 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

20 Comments

Leave a Reply
  1. Vinod says:
    Aug 21, 2019 at 12:03 pm

    autocomplete is coming in the first filed but not in zip and state fields, please advice.

    Reply
    • WPBeginner Support says:
      Aug 22, 2019 at 9:23 am

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

      Reply
  2. Mooki says:
    Jan 28, 2019 at 6:32 am

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

    Reply
    • WPBeginner Support says:
      Jan 28, 2019 at 3:09 pm

      Glad our site could help you :)

      Reply
  3. Fabiano Hirtz says:
    Dec 13, 2018 at 12:31 pm

    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?

    Reply
  4. Jay Kuntal says:
    Sep 24, 2018 at 12:04 am

    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

    Thanks

    Reply
    • ahmer says:
      Nov 29, 2018 at 11:46 am

      Hi jay,
      did you get it working? i’m stuck, can’t seem to get it working.

      Reply
  5. Tess says:
    Aug 28, 2018 at 6:00 pm

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

    Reply
  6. asima says:
    Aug 24, 2018 at 11:17 pm

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

    Reply
  7. steve hajjaj says:
    Sep 22, 2017 at 9:00 pm

    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

    Reply
    • WPBeginner Support says:
      Sep 24, 2017 at 10:21 pm

      Hi Steve,

      Make sure that you are targeting the correct CSS class or ID used by your form’s address field.

      Reply
  8. Luke says:
    Mar 31, 2017 at 6:40 pm

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

    Reply
    • Luke says:
      Mar 31, 2017 at 9:51 pm

      Also, the zip code is always missing!

      Reply
    • Luke says:
      Mar 31, 2017 at 10:51 pm

      Also, the only thing that comes through on form submission is the keys a user started typing. The address the user selects is what is shown, but not what is submitted with the form

      Reply
    • WPBeginner Support says:
      Apr 2, 2017 at 6:14 pm

      Hey Luke,

      If you think you have found a bug, then please report it to plugin authors. They may be aware of a fix or can then work on it.

      Reply
  9. Sarah says:
    Feb 14, 2017 at 11:54 am

    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 …

    Reply
  10. Camilo says:
    Feb 12, 2017 at 12:58 pm

    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

    Reply
    • WPBeginner Support says:
      Feb 12, 2017 at 3:30 pm

      Hi Camilo,

      Currently it is only possible if you use the single field for complete address.

      Reply
  11. Zafar Rathore says:
    Feb 10, 2017 at 7:05 am

    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

    Reply
  12. Nicholas Johnson says:
    Feb 10, 2017 at 6:07 am

    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.

    Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
PushEngage
PushEngage
Increase your website traffic & revenue with push notifications. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
Beaver Builder Coupon Code
Beaver Builder Coupon
Get the best possible price on this easy drag-and-drop page builder plugin. From just $99 in 2020.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.