No-code

1 views

6 min

How do you add address autocomplete in Webflow?

Why add an address field with autocomplete?

Prerequisites	Details
Google Cloud Console account	Free to create
Places API enabled	In Google Cloud Console > APIs
API key	Restrict it to your domain for security
Webflow input ID	Add 'address-input' to your field

Better user experience

‍Ease of use: Autocomplete helps users find and enter their addresses faster and more easily.

Fewer errors: It reduces the risk of mistakes by suggesting valid addresses.

Data accuracy

Standardization: Entered addresses are often normalized into a standard format, which helps ensure data accuracy.
Validation: It lets you validate addresses in real time, so the information you receive is accurate.

Efficiency

Time savings: It cuts down the time users spend filling out forms, which is especially useful on mobile devices where typing can be a pain.
Less friction: It minimizes the steps needed to complete a form, helping reduce cart abandonment and sign-up drop-off.

All of this helps boost form conversions and make your data more reliable.

Gemeos, the Webflow agency, shows you how to do it!

Good to know

The Google Places API is billed once you go beyond the $200 monthly free credit. In 2026, Google is encouraging migration to the New Places API (places.googleapis.com). The method shown here still works, but check the documentation for new projects.

Tutorial: add a single-field address autocomplete in Webflow

‍

1. Create a Google Cloud Console account and go to Google Maps Platform

Follow this link to get there!

You should see a modal with your API key (see the screenshot below).

Copy your API key so you have it handy — you'll need it for the next steps.

‍

2. Add the "address-input" ID to your input in Webflow

‍

3. Add this custom code to your page or in an embed inside your form

Make sure you add your API key in place of {API key} in the first and second code blocks below.

‍

4. Publish and test the result

It doesn't get much simpler than that.