Autocomplete Fields in WordPress

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? It’s annoying, but thankfully you can speed up the process for your visitors by adding autocomplete fields for addresses 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 Autocomplete Google Address plugin for WordPress.

Why Add Autocomplete Address Fields 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 Add Autocomplete Fields For Addresses In WordPress

Step 1: Install Autocomplete Google Address

The Autocomplete Google Address plugin is an incredibly simple tool that is highly effective at adding autocomplete forms for addresses in WordPress. All you need to do is enter the “Places” autocomplete API Key from Google.

After that, you just need to activate the API on specific text input fields by providing the Form ID. Overall, it’s incredibly simple and will have fully functional address autocomplete forms in a matter of minutes.

Let’s start by going to the plugins area of WordPress and clicking on the Add New option.

Add New

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

Autocomplete Google Address Fields in WordPress

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

Install Now Button

Step 2: Get the Places API Key

The good news is that you don’t have any settings to configure. Instead, all you need to do is enter the API key, and choose the inputs that it will work in. Of course, getting the API key can be a bit confusing if it is your first time getting one from Google.

That said, if you’ve gotten an API key from Google in the past, the process is identical to any other.

On the left-hand admin panel click on the Autocomplete option.

Autocomplete for Fields in WordPress

You will now need to visit the Google Developers page. Here you can connect with Google services. In this case, we are looking for the Google Places API, which will give you access to the 100 million locations available in Google Maps.

Use the search box to search for Places API.

Search for Places API

Select the Places API.

Select Places API

Here, you can read an overview of what this API will be capable of. You can also find the pricing information, which is quite important. Currently, Google provides all accounts with $200 free credit every month, and this is more than enough for low-traffic sites.

However, if you exceed this threshold, you will have to pay. The only problem is that entering your billing information is not optional. You must enter valid credit card information, which tends to scare off beginners looking to exclusively use the free credit.

Click on the “Enable” button.

Enable Button

Afterward, you will be required to enter billing info (assuming you do not already have this entered). Simply follow the onscreen steps and you should receive your API Key, which is all you need for the plugin.

Step 3: Enter the API and Form IDs

Let’s head back to our WordPress website. You should still be on the main settings page for the plugin.

Paste the API key into the Google Place API Key box.

Paste API Key

Now you just need to enter the Form ID that you want the API to work on. You can enter multiple Form IDs by separating them with a comma.

Enter Form ID

Congratulations, you have successfully set up an Autocomplete Google Address plugin for your website. Remember to never share your API key because someone could use it on their site, which would use up your credit and potentially cost you money.

Additional Plugins To Add Autocomplete Fields In WordPress

Since linking with Google Maps and other APIs 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

Autocomplete fields in WordPress with 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 AutoFill For WooCommerce

Checkout Address Autofill For WooCommerce

One of the most common reasons a visitor needs to enter their address on a website is if they are ordering an online product. And on WordPress, you are probably using WooCommerce to sell that product online, thus, you need a tool that can integrate with it.

Look no further than the Checkout Address Autofill for WooCommerce plugin. This plugin allows customers to use autofill when entering their addresses into the billing and shipping sections.

It’s easy to use and free, so be sure to give it a try.

Address Autocomplete via Google for Gravity Forms

Address Autocomplete via Google for Gravity Forms

If you use Gravity Forms to create contact forms in WordPress, you should consider using the Address Autocomplete via Google for Gravity Forms plugin. As the name suggests, it allows you to easily add address autofill to your contact forms.

Similar to the plugin we just covered, it uses the Places API key, so, it will function identically but only for Gravity Forms.

Autocomplete Fields In WordPres Save Visitors Time

Keeping your website connected to services like Google Maps and other very popular services is key to keeping up with the times. And more importantly, connecting with these services can really save visitors time.

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. And when it comes to directions, Google Maps has become the staple;e that visitors expect.

Anything less and they may start to think your website is older.

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.