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 (New)
   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 Google’s Places API (New), which provides address suggestions as users type. All you need? A Google API key to connect the two.

You’ll use one Google API key to connect them to your form.

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 (New)

This powers address suggestions and autocomplete.

1. In Google Cloud, open APIs & Services › Library.
2. Search for Places API (New).
3. Select it › click Enable.

And that’s it! Google’s address suggestions are ready to connect to Gravity Forms.

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. Under Select API restrictions › choose Places API (New).

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 (New) and Maps JavaScript API.

Why does this matter? These restrictions help prevent unauthorized use of your Google API key.

Obtain the Key

Once you’ve configured the restrictions, click Create to generate your API key.

Copy that long string of characters somewhere safe, like a password manager. We’ll need it in the next step.

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 Address field’s settings › under Perks › check Enable Google Address Autocomplete.

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

You can even take this further by adding an interactive map that automatically pins the autocompleted address as soon as someone fills it in.

You’re All Set!

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