Gravity Forms Address Autocomplete

Your form's Google key travels in plain view

To suggest addresses while the visitor types, the form talks to Google from their browser. That means the access key sits inside the page code, and anyone who opens the browser's developer tools can copy it.

In an address autocomplete, the key is not a secret: it is protected by the restriction you set in Google Cloud, and that restriction is part of the installation.

Address Autocomplete is a Gravity Perks perk for Gravity Forms. It adds Google address suggestions to Address fields, calculates distance and travel time between two addresses and shows maps with a marker.

What it adds to address fields

• One-checkbox autocomplete: enabled on each Address field once the Google key is configured.
• Address types: it works with United States, Canadian and international addresses, on desktop and mobile.
• Country restriction: it limits suggestions to the chosen countries. United States and Canadian fields restrict themselves to their country.
• Travel estimate field: with two Address fields, it calculates distance, time or both, with the travel mode and unit you choose.
• Map field: it shows a marker for an address or the route between two, and updates when the address changes.
• Latitude and longitude: saved as entry metadata for each chosen address, and available in feeds and in the entry merge tag.
• PHP and JavaScript filters to adjust options, marker, map and the estimate template.

What Google requires and how it is configured

You need a Google Cloud account with billing enabled to use the Places API. You enable the APIs that apply: Places API (New) for autocomplete, Maps JavaScript API for the map field and Routes API for the travel estimate.

When creating the key, restrict it to those three APIs and, under application restrictions, choose websites and add each allowed domain, including testing and staging ones. Then you paste the key in Forms, Settings, Autocomplete. There you can also limit suggestions to specific countries.

A delivery form with origin and destination

Imagine two Address fields with autocomplete, one for origin and one for destination, a travel estimate field that links them and a map field that shows the route. Once both addresses are filled in, the form returns the distance and the time.

The estimate is Google's. It is one possibility among others; adapt it to your deliveries.

Five countries at most and other Google barriers

• Up to 5 countries can be chosen, and Google's API does not allow excluding countries.
• The Places API does not filter by state.
• Google's window uses the HTML <dialog> element, supported only from iOS 15.4.
• Gravity Forms does not support the same form embedded more than once on a page, including in popups.
• Browser autocomplete is disabled by default. A filter lets you turn it back on.
• Search by business or place name is disabled by default, and there is a snippet to enable it.

To get started:

1. Have Gravity Forms and Gravity Perks active, and install and activate the perk.
2. In Google Cloud, enable the APIs you will use and create the key with its restrictions.
3. Paste the key in the Autocomplete settings and, if you want, choose the countries.
4. Add an Address field, open its settings, go to Perks and check Enable Google Address Autocomplete.

Pieces that go along with an address form

To copy the shipping address into the billing one, the perk suggests combining it with Copy Cat. If you also need calculations in the form, look at Advanced Calculations.

Answers about Address Autocomplete

Do I need a Google key?

Yes. It is created in Google Cloud and requires billing to be enabled.

Can I limit suggestions to certain countries?

Yes, up to 5 countries. United States and Canadian fields limit themselves.

Does it save coordinates?

Yes. Latitude and longitude are saved with the entry for each chosen address.

Can it calculate the distance between two addresses?

Yes, with the travel estimate field, which uses two Address fields with autocomplete.