How to Include Autocomplete for Address Fields in WordPress

Have you ever signed up for a new website, filled in a form, or entered your credit card information and used autocomplete address to speed up the process? Filling in your address is one of the most common things done when filling out forms. Thankfully you can speed up the process for your visitors if you activate the autocomplete address in WordPress.

Using an autocomplete address plugin to aid your visitors when they are filling out forms is extremely handy. It is very beneficial when you have a big event like Black Friday and you will be seeing a very large amount of new customers that are looking for a sale. Today I will demonstrate how to set up and use Address Autocomplete using Google Place API.

Why is Adding an Autocomplete Address Important in WordPress

The most obvious answer is the speed and convenience it offers customers. Being able to check out quickly speeds up the process for visitors and allows you to receive your payment that much quicker.

There is another advantage that is not so obvious.

If you can quickly get customers through checkout, they will be more likely to go through with a purchase. There is a large percentage of shoppers at checkout that will ask themselves if they really need to buy an item or not. Getting them through checkout quickly will give them less time to actually reconsider their purchase.

How to Install and Use the Address Autocomplete Plugin

Today I will demonstrate how to install and use the Address Autocomplete plugin. The plugin is easy to use, but it will require you to use the Google Developers page to properly set up the plugin.

Let’s start by going to the plugins area of WordPress and click on the “Add New” button.

click on the "Add New" button.

Search for Address Autocomplete in the available search box. This will pull up additional plugins that you may find helpful.

Search for Address Autocomplete in the available search box.

Scroll down until you find the Address Autocomplete Using Google Place API plugin and click the “Install Now” button and activate the plugin for use.

click the "Install Now" button

On the left-hand admin panel click on Settings and select the Google Autocomplete option. This will pull up the main settings page.

select the Google Autocomplete option

You will now need to visit the Google Developers page. Here you can connect with Google Maps, which will allow visitors on your website to receive location suggestions in WordPress. Once you have logged into your account at the top left of your screen click on the Select a project drop down.

click on the Select a project drop down.

A pop-up window will appear. Click on the + symbol to create a new project.

click on the + symbol to create a new project.

You will now be asked to name your project, to choose if you would like to receive email notifications about the project, and to agree to the terms of service. Fill these options out and click on the “Create” button.

click on the "Create" button.

You will now see all of Google’s popular APIs in front of you. To activate any of them simply click on them. For this tutorial, we will be clicking on the Google Places API Web Service. There are similar options, but you must make sure you are clicking on Web Services for it to work for WordPress.

Google Places API Web Service

Once you click on a service you will have a short description of the API. Once you are sure you want the API click on the “Enable” button.

click on the "Enable" button.

Your API is now working, but not actually connected to your website. To do that you will need to create a set of credentials. Click on the “Create Credentials” button.

Click on the "Create Credentials" button.

Click on the “What Credentials do I need?” button.

Click on the "What Credentials do I need?" button.

An API key will now be generated. Copy this Key for later use. Click the “Done” button. Remember to not share your API key with anyone.

Click the "Done" button.

Click back on the Library. You now want to enable the Google Maps JavaScript API in the same way as the previous API. This time you will not need to create another API key. Your project only requires one.

Google Maps JavaScript API

Let’s head back to our WordPress website. You should still be on the main settings page for the app. Paste the API key into Google Place API Key box. Fill out the Name. The Class section is dependent on which plugin you are using to produce forms on your website. The ID section is not needed. Click on the “Save” button when you are done.

fill out the settings

Congratulations, you have successfully set up an Autocomplete Address for your website. This is a longer tutorial, but the steps are still quite easy to accomplish. Remember to never share your API key and that you need to go into the code of your website and locate the class line, which is dependent on what Form plugin you are using.

Additional Plugins

Since linking with Google Maps and other API from Google is very common, many plugins exist that will help you accomplish that. Here are some plugins I can recommend trying.

WP Google Maps

WP Google Maps

WP Google Maps is the most popular plugin related to Google Maps with over 300,000 active installs. It has a pro version with every feature you could ever need for your website to utilize Google Maps. It has a lot of customization options for the maps you do have on your website and supports the Google Maps Autocomplete feature. It’s a great plugin that is widely used and I recommend using it.

Checkout Address Autocomplete

Checkout Address Autocomplete

Checkout Address Autocomplete is a more specific autocomplete plugin. It focuses directly on check out for online shops. It’s very handy when you want to speed up filling out shipping and billing addresses. If that is exclusively what you want to autocomplete, then this plugin is exactly what you want.

Always Modernize Your Website

Keeping your website connected to services like Google Maps and other very popular services is key to keeping up with the times. When was the last time you needed directions and didn’t use Google Maps? Keeping your website linked to these modern services is important. No one will want to use an outdated website that is doing the bare minimum.

There are many key components that most online visitors expect when they access a website. Just as Google Maps can help restaurants give directions to visitors, PayPal can help speed up the payment method for online websites. I’m sure you can think of a few features that most major websites use that you liked. Try to be unique, but don’t forget to always include the basic things visitors expect.

How many forms do you have that utilize the Autocomplete Address feature that Google API offers? Have you noticed a shorter amount of time spent on forms where this feature is offered?

2 thoughts on “How to Include Autocomplete for Address Fields in WordPress”

  1. Hi,

    Followed instructions and is working great however I need to display postcode / zipcode in the results. Do you know how I can add this?

  2. i need to make the same thing in pure js but the api key that i get just gives me 30 tries in a day , how is this plugin doing it for free ?? or did it change ?

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copy link