How to Set Up Address Autocomplete in Gravity Forms

1. The Big Picture
2. Step 1: Set Up a Google Cloud Platform Project
   1. Create a Project
3. Step 2: Enable the Two APIs
   1. 1 – Places API
   2. 2 – Maps JavaScript API
4. Step 3: Generate the API Key
   1. Let’s Create the Key 🔑
   2. Keep the Key Safe 🔐
   3. Obtain the Key
5. Step 4: Add the API Key to Gravity Forms
6. Step 5: Enable Autocomplete on Address Fields
7. You’re All Set!

Typing out a full address isn’t exactly fun, and on mobile? It kinda feels like a thumb workout. All that extra tapping and typing gives people just enough time to wonder if they really need to finish this form right now.

GP Address Autocomplete solves all this by connecting Address fields to Google’s giant address book. As soon as you start typing, location suggestions pop up, and the whole address fills in with a single click. Best of all? You only need to set it up once.

The Big Picture

Address Autocomplete works its magic by connecting Gravity Forms to two of Google’s services: the Google Places API and the Maps JavaScript API. All you need? A single key to connect to both services.

Here’s the plan:

1. Let Google know you’d like to connect with their services.
2. Grab your key and secure it so only your site can use it.
3. Plug the key into Gravity Forms.

Step 1: Set Up a Google Cloud Platform Project

Before we dive in, what’s Google Cloud Platform? Think of it as Google’s hub of online services (maps, storage, and more) that you can use on your website. To use these services, you’ll need a “project.”

But what’s a “project”?

Think of it as a folder where Google stores the services you’re using. We’ll set one up right now.

Create a Project

1. Head to Google Cloud Platform Console.
2. Click the project dropdown in the top right (it might say “Select a project”).
3. Click New Project.

Give your project a clear name like your site’s name. Next, we’ll add in the Google Places and Maps JavaScript APIs.

Step 2: Enable the Two APIs

Quick explainer: API (Application Programming Interface) is like a messenger that lets two applications talk to each other. In this case, it’s how Gravity Forms asks Google for address suggestions. If you want to learn more, we’ve got a great guide that explains API in detail.

Let’s enable the two APIs you need:

1 – Places API

This is what knows “all the addresses in the world” and serves up suggestions.

1. Click the menu icon (☰) in the top left, then select APIs & Services › Library.
2. Search for “Places API.”
3. Click and Enable.

2 – Maps JavaScript API

This one powers the autocomplete feature.

1. Still in the API Library,
2. Search for “Maps JavaScript API.”
3. Click and Enable.

Now Google knows you want to use these APIs.

Step 3: Generate the API Key

What’s an API Key? Think of it as a message that tells Google “Yes, this site is allowed to use your APIs.”

Let’s Create the Key 🔑

1. Click the menu icon (☰) in the top left, then select APIs & Services › Credentials.
2. Click the + Create Credentials button.
3. Select the API key from the dropdown.
4. Give it a clear name like My Local Site.

Don’t close this window yet. We’ll need to keep this key safe so only your website can use it.

Keep the Key Safe 🔐

1. Under Application restrictions, select Websites.
2. Click Add and enter your domain (if you have a staging or local site, you can add those too).
3. Under API restrictions, select Restrict key.
4. From the dropdown, select only: Places API and Maps JavaScript API.

Why does this matter? This restriction protects you. If someone finds your API key, they can only use it for address lookups and nothing else. It’s like having a token that works in one game machine, not the whole arcade. 😉

Obtain the Key

When you’re done configuring everything, click Save. 

See the long string of random characters? That’s the API key. Copy it to somewhere safe (like a password manager). 

Step 4: Add the API Key to Gravity Forms

Let’s bring it all home. Let’s use the API key to connect our Google APIs to Gravity Forms.

1. In your WordPress dashboard, go to Forms › Settings › Autocomplete.
2. Paste the API key into the Google API Key field.
3. Hit Save Settings.

Step 5: Enable Autocomplete on Address Fields

Time to enchant those Address fields:

1. Open your Spellbook and activate GP Address Autocomplete.
2. Go to your form.
3. Add an Address field (or edit an existing one).
4. Open the field settings and navigate to the Perks tab.
5. Check Enable Google Address Autocomplete.

That’s it! Start typing and watch suggestions appear instantly. 🪄

You’re All Set!

No more friction, no more abandoned forms. Everybody wins. 🏆