### [How to Make a Google Maps Autocomplete Address Form](https://wpforms.com/how-to-make-a-google-maps-autocomplete-address-form/)

**Published:** September 28, 2021
**Author:** Hamza Shahid

**Excerpt:** Would you like for your users to be able to use autocomplete to fill out the Address field in your forms? Autocomplete makes filling out forms faster and easier. In this post, we show you how to set up address autocomplete using the WPForms Geolocation addon with Google Maps.

**Content:**

Address fields are frustrating. Users misspell street names, forget zip codes, enter incomplete addresses, or abandon forms entirely because typing full addresses is tedious.

Google Maps autocomplete solves this by suggesting complete, validated addresses as users type. After typing 3-4 characters, users see a dropdown of real addresses to select from.

Want to set this up on your form to eliminate eliminates typos and speed up form completion? In this guide, I’ll provide step-by-step instructions on how to create a Google Maps autocomplete address form.

## How Do I Make a Google Maps Autocomplete Address Form?

With WPForms Pro and the Geolocation addon, you can add map features to your forms in no time. Follow these easy, step-by-step instructions to get started:

- [Step 1: Install the WPForms Plugin](#step-1-install-the-wpforms-plugin)
- [Step 2: Enable the Geolocation Addon](#step-2-enable-the-geolocation-addon)
- [Step 3: Configure Geolocation Settings](#step-3-configure-geolocation-settings)
- [Step 4: Create Your Autocomplete Address Form](#step-4-create-your-autocomplete-address-form)
- [Step 5: Add the Address Field to Your Form](#step-5-add-the-address-field-to-your-form)
- [Step 7: Publish Your Google Maps Autocomplete Address Form](#step-7-publish-your-google-maps-autocomplete-address-form)
- [Next, Enhance Your Forms With Interactive Maps](#aioseo-next-track-your-wordpress-form-conversions-169)

### Step 1: Install the WPForms Plugin

The first thing you’ll need to do is to install the [WPForms plugin](https://wpforms.com/pricing/), which is a powerful form builder that makes it easy to create contact forms, registration forms, and more.

It has over [2,100+ WordPress form templates](https://wpforms.com/templates/ "2,100+ WordPress form templates") you can use and comes with built-in geolocation tools to really make displaying maps on your forms a lot easier.

To add maps to your contact forms, you’ll need [WPForms Pro](https://wpforms.com/pricing/ "WPForms Pro"), which includes the Geolocation addon and all the map features we’ll cover in this tutorial.

[![The WPForms pricing page. ](https://wpforms.com/wp-content/uploads/2024/08/WPForms-Pricing-Page.png)](https://wpforms.com/pricing/)If you’re new to WordPress or facing any difficulty during the plugin installation process, you can check the step-by-step guide on [how to install a WordPress plugin](https://wpforms.com/docs/install-wpforms-plugin/).

[Upgrade to WPForms Pro Now! 🙂](https://wpforms.com/pricing/)

### Step 2: Enable the Geolocation Addon

Now that WPForms Pro is installed, you need to activate the Geolocation addon. This is what powers all the map features in your contact forms.

To activate the addon, head over to your WordPress dashboard and click on **WPForms » Addons.**

![WPForms addons](https://wpforms.com/wp-content/uploads/2024/05/wpforms-addons-1024x744.png)In the search bar, type **Geolocation**. Then click the **Install Addon** button to change its status to **Active**.

![WPForms geolocation addon](https://wpforms.com/wp-content/uploads/2025/01/geolocation-addon.png)The addon installs automatically. No need to download files or configure anything yet. Next, you’ll connect it to Google Maps.

### Step 3: Configure Geolocation Settings

Once you’ve enabled the Geolocation addon, you need to configure its settings. To do this, click on **WPForms » Settings.**

![wpforms settings](https://wpforms.com/wp-content/uploads/2021/09/Untitled-design-12.png)On the WPForms settings page, click **Geolocation** from the tabs across the top to access its settings.

![configure-geolocation-addon](https://wpforms.com/wp-content/uploads/2021/09/Untitled-design-13.png)Here, you’ll see different options to configure the Geolocation addon based on different needs and requirements:

- **Places Provider**: You get the option to choose which provider you’d like to receive your geolocation information. Here we’ll select the Google Places API as our places provider.

![Selecting Google Places as the Places Provider for the Geolocation addon](https://wpforms.com/wp-content/uploads/2021/09/geolocation-places-provider-google.png)- **Current Location**: Enable this option to allow your user’s location to be pre-filled into the form.

![Enabling location detection for the WPForms Geolocation addon](https://wpforms.com/wp-content/uploads/2021/09/geolocation-detect-current-location.png)- **Google Places API**: To enable autocomplete address feature and display Google Maps within your forms, you’ll need to generate an API Key and connect it with WPForms.

![The Google Places API Key fields](https://wpforms.com/wp-content/uploads/2021/09/google-places-api-key1.png)Let’s see the complete process of generating an API key.

#### Generate an API Key From Google Developer Console

Go to the [Google Developer Console](https://console.cloud.google.com/apis/dashboard) and select the project from the **Select a Project** menu at the top.

If you don’t have any previously created projects, click **New Project** to create a new one.

![create-a-project-in-google-search-console](https://wpforms.com/wp-content/uploads/2021/09/Untitled-design-14.png)Once you’ve successfully created a new project, click **Enable APIs and Services.**

![enable api and services](https://wpforms.com/wp-content/uploads/2021/09/Untitled-design-15.png)This will open a **Google API Library.**

![google-api-library](https://wpforms.com/wp-content/uploads/2021/09/google-api-library.png)From here, you’ll need to enable three 3 APIs:

1. Geocoding API
2. Maps JavaScript API
3. Places API

This API library provides an easy search option; type the name of the API in the search box, go to your API and click the **ENABLE** button.

![enable api](https://wpforms.com/wp-content/uploads/2021/09/screely-1632227776256.png)Once you’ve enabled all your APIs, go back to your Google Console dashboard and navigate the **Credentials** tab.

![credentials tab of google search console](https://wpforms.com/wp-content/uploads/2021/09/navigate-to-credentials-tab.png)Click on the **Create Credentials** button at the top and select the **API key** option.

![create api](https://wpforms.com/wp-content/uploads/2021/09/create-api.png)A pop-up with an API key will open. Click on the **RESTRICT KEY** option at the bottom right corner of the pop-up.

![restrict-api-key](https://wpforms.com/wp-content/uploads/2021/09/restrict-api-key.png)A new page will open, where you’ve to configure the following settings:

- **Application Restrictions:** From here, you can select which websites, IP addresses, or applications you can use the API key. Here you’ll need to choose the HTTP Referrers option to allow your Key to be used within your websites.

![application-restrictions](https://wpforms.com/wp-content/uploads/2021/09/application-restrictions.png)- **Website Restrictions:** Once you select the HTTP Referrers, a new option will be displayed, **website restrictions**. Here you need to add your website domain name to restrict the API Key to be used only by the specified websites.

![website-restrictions](https://wpforms.com/wp-content/uploads/2021/09/website-restrictions.png)- **API Restrictions:** After restricting your Key by Application and Website, you’ll need to restrict your Key by API. To do this, click the **Restrict key** option.

![restrict-api-key](https://wpforms.com/wp-content/uploads/2021/09/restrict-api-key-2.png)This will open a dropdown with a multiple APIs option. Select the following APIs from the dropdown:

- Places API
- Maps JavaScript API
- Geocoding AP

![select google APIs](https://wpforms.com/wp-content/uploads/2021/09/select-APIs.png)Once you’re done with selecting the APIs, click the **Save** button to save your settings, which will redirect back you to the **Credentials** page. Copy your Key from the page and head back over to your WPForms settings.

![copy api key](https://wpforms.com/wp-content/uploads/2021/09/copy-api-key.png)In your WPForms settings, paste this into the API Key field under the Google Places API and click on the **Save Settings** button.

![google places API key](https://wpforms.com/wp-content/uploads/2021/02/Google-Places-API-Key-Setting-2-1024x906.png)Your Geolocation settings are now configured. Next, you’ll create a form with address autocomplete enabled.

### Step 4: Create Your Autocomplete Address Form

With the Geolocation addon configured, you’re ready to build your contact form. This takes about 5 minutes. Go to **WPForms » Add New** in your WordPress dashboard to open the form builder.

![Add New Form](https://wpforms.com/wp-content/uploads/2020/08/Add-New-Form.png)Give your form a name in the **Name Your Form** field. Something like “Get in Touch” works well. You’ll see a few options here. If you want to save time, you can choose from any of our [2,100+ WordPress form templates](https://wpforms.com/templates/).

![Name your form](https://wpforms.com/wp-content/uploads/2021/02/form-name.png)I recommend choosing the [Simple Contact Form Template.](https://wpforms.com/templates/simple-contact-form-template/ "Simple Contact FormTemplate.") This gives you a ready-made contact form with the essential fields already added.

![Selecting the Simple Contact Form template](https://wpforms.com/wp-content/uploads/2021/09/Simple-contact-form-template.png)The template includes a **Name** field, **Email** field, and **Comment or Message** field. You can customize these fields, add new ones, or remove any you don’t need.

![A form built with the Simple Contact Form template](https://wpforms.com/wp-content/uploads/2021/04/simple-contact-form-template.png)Now, there are probably a few more things other form settings you might want to configure, like notifications and confirmations. If so, (and I highly recommend this) check out our [detailed guide on creating your first form](https://wpforms.com/docs/creating-first-form/#form-settings).

**Pro Tip**

Another option if you don’t want to manually set up every field but have custom requirements is to let the WPForms AI Form Builder handle it for you.

Simply hover over the purple **Generate With AI** button and click **Generate Form**. You’ll land on the AI form builder screen. This is where you describe what kind of form you want.

![wpforms ai quiz builder](https://wpforms.com/wp-content/uploads/2024/10/enter-prompt-field-1024x698.png)

You can type your own prompt or choose from the suggestions on the left. Once you hit generate, the AI takes a few seconds to build your form.

[Try the WPForms AI Builder! 🙂](https://wpforms.com/pricing/)

### Step 5: Add the Address Field to Your Form

Now that we have our form ready, we just need to add the **Address Field.** On the left, drag the **Address Field** from the Fancy Fields section and place it onto your form.

![Add-Address-Field-to-WPForms](https://wpforms.com/wp-content/uploads/2021/09/screely-1632228391866.png)The Address field already includes a label and sub-label text for your ease. You get the flexibility to customize the label text, select the address scheme, customize field size, and hide label and sub-labels.

Now you’ll activate autocomplete functionality for your Address field. This is a simple toggle that connects the field to your Google Places API.

Click on the **Address** field in your form, then click the **Advanced** tab in the field settings on the left.

![Opening the Advanced options for the Address field](https://wpforms.com/wp-content/uploads/2021/09/address-field-advanced-options.png)Scroll down till you see the **Enable Address Autocomplete** option. Toggle on this setting to enable address autocomplete in your form.

![Enabling Address Autocomplete for an Address field](https://wpforms.com/wp-content/uploads/2021/09/enable-address-autocomplete.png)Allowing this will open one more feature: **Display Map.** If you want to display a map in your contact form, turn on this option too.

Use the dropdown to specify if you want the map to appear above or below the Address sub-fields.

![Enabling the map display in WPForms](https://wpforms.com/wp-content/uploads/2021/09/display-map-address-field.png)Click on the **Save** button at the top. Now that your autocomplete address form is ready, it’s time to add it to your website.

### Step 7: Publish Your Google Maps Autocomplete Address Form

WPForms allows you to add your form in multiple locations, including pages, blog posts, and even [sidebar widgets](https://wpforms.com/how-to-add-a-contact-form-in-wordpress-sidebar-widget/) of your website.

Before embedding your form to a page, if you want, you can check how your form will look on the live page. To preview your form, click on the **Preview** button at the top.

![Previewing your form](https://wpforms.com/wp-content/uploads/2021/09/preview-form-1.png)If you’re happy with your Google Maps autocomplete address form, you’re ready to add it to your page. Click on the **“+”** icon and add the **WPForms block** from the block editor.

![Adding a WPForms block to a page](https://wpforms.com/wp-content/uploads/2020/06/add-wpforms-block-2.png)Then, select your form from the dropdown in the block. In this case, I’ll select the Address Autocomplete Form that I just created following the steps above.

![Selecting your Address Autocomplete form from the WPForms block](https://wpforms.com/wp-content/uploads/2021/09/wpforms-block-address-autocomplete-form.png)After that, all you have to do is publish the page and your form will go live and be ready to accept submissions. Here’s how the Address field with the interactive map looks on a published page. Isn’t that amazing?

![address autocomplete example](https://wpforms.com/wp-content/uploads/2021/09/address-autocomplete-example-1024x872.png)Awesome job! You’ve successfully created a Google Maps autocomplete address form. Check out this guide for more details on [Address Lines 1 and 2](https://wpforms.com/address-line-1-vs-address-line-2/).

### FAQs about How to Make a Google Maps Autocomplete Address Form

Autocomplete address form is a popular topic of interest among our readers. Here are answers to some common questions about it:

#### What is autocomplete address in form?

Autocomplete address is a feature that suggests complete, validated addresses as users type in a form field. After entering 3-4 characters, a dropdown appears with matching addresses from Google’s database.

Users select their address instead of typing every field manually. This eliminates typos, speeds up completion (especially on mobile), and ensures addresses are accurate and deliverable.

#### How do I add an autocomplete address to my WordPress form?

Install WPForms Pro or higher, activate the Geolocation addon, generate a free Google Places API key from Google Cloud Console, paste the API key into **WPForms » Settings » Geolocation**.

After that, all you need to do is create a form, add an Address field, and toggle on “Enable Address Autocomplete” in the field’s Advanced settings.

The complete setup takes 20-30 minutes and is covered step-by-step in this guide. Once configured, autocomplete works on any form with an Address field.

#### Does WPForms address autocomplete work with Google Maps?

Yes, WPForms uses Google Places API for address autocomplete, which is the same technology that powers Google Maps address search.

You need to enable three Google APIs (Places API, Maps JavaScript API, and Geocoding API) for full functionality.

WPForms can also display an interactive Google Map on your form showing the selected address location, toggle this on in the Address field’s Advanced settings under “Display Map.”

#### Is Google Maps address autocomplete free?

Google provides 28,000 free address autocomplete requests per month. After that, you pay $2.83 per 1,000 requests. Most small to medium websites stay within the free tier.

A “request” counts each time a user types in your address field and suggestions appear (not per keystroke, but per search session). Monitor usage in your Google Cloud Console.

If you exceed limits frequently, consider upgrading your Google Cloud plan or restricting autocomplete to essential forms only.

#### What’s the difference between Google Places API and Mapbox for autocomplete?

Google Places API offers more comprehensive worldwide address coverage (200+ countries) and better address validation, but has a 28,000/month free tier.

Mapbox has unlimited free autocomplete requests but less detailed address data in rural areas and some international regions.

WPForms supports both. Choose Google Places for accuracy or Mapbox for unlimited usage. You can switch providers in **WPForms » Settings » Geolocation** without rebuilding your forms.

#### Can I use address autocomplete on WooCommerce checkout forms?

WPForms address autocomplete works on WPForms-built forms only, not WooCommerce’s native checkout. However, you can create a custom checkout form using WPForms with payment integration and address autocomplete.

Alternatively, install a WooCommerce-specific address autocomplete plugin that integrates directly with WooCommerce checkout fields.

If you need WooCommerce integration specifically, check WooCommerce’s plugin directory for “address autocomplete” or “Google Places” plugins designed for checkout.

#### What is the best Google Maps plugin for WordPress?

WPForms Pro is one of the [best map plugins for WordPress](https://wpforms.com/best-wordpress-map-plugins/). It includes a powerful [Geolocation addon](https://wpforms.com/addons/geolocation-addon/) that comes with a pre-built address autocomplete feature that works with Google Maps or Mapbox.

This feature auto-locates and automatically suggests your users’ locations as they fill out and type in their addresses.

Furthermore, with the Geolocation addon, you can [add a map to your WordPress contact form](https://wpforms.com/how-to-display-a-map-with-your-wordpress-contact-form/) and allow your users to add a location by adjusting the pin on the map.

#### What happens to my form if I exceed Google’s free tier?

If you exceed 28,000 autocomplete requests per month, Google either charges your Cloud account (if billing is enabled) or stops providing autocomplete suggestions (if billing isn’t enabled).

Your form continues working and the Address field just becomes a regular text input without suggestions. Users can still type addresses manually.

Monitor your usage in Google Cloud Console and set billing alerts to avoid surprises. Most sites stay well under the free limit unless they have very high traffic.

### Next, Enhance Your Forms With Interactive Maps

Awesome job! You’ve successfully created a Google Maps autocomplete address form that improves user experience and ensures accurate address data. Now that you have address autocomplete working, take your forms to the next level with [WPForms’ Map Field](https://wpforms.com/docs/using-the-map-field/ "WPForms' Map Field").

This feature lets you embed interactive maps directly in your forms where users can click to select locations, view multiple business locations with custom markers, or choose their preferred service area from a visual map. The Map Field is perfect for:

- **Multi-location booking forms:** Let customers see all locations on one map and select their preferred branch.
- **Service area selection:** Display your coverage zones visually so customers know if you serve their area.
- **Contact forms with office locations:** Help visitors find the nearest office before they even submit.
- **Event registration:** Show venue locations with directions built into the form.

Check out these guides to explore what’s possible:

- [How to Display a Map With Your WordPress Contact Form](https://wpforms.com/how-to-display-a-map-with-your-wordpress-contact-form/ "How to Display a Map With Your WordPress Contact Form")
- [How to Create a Multi-Location WordPress Booking Form](https://wpforms.com/how-to-create-a-multi-location-wordpress-booking-form/ "How to Create a Multi-Location WordPress Booking Form")

Want to track which forms convert best? Learn [how to track a lead source in WordPress](https://wpforms.com/how-to-track-lead-source-in-wordpress/ "how to track a lead source in WordPress") to see which traffic sources bring you the most form submissions.

[Build Your WordPress Form Now](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** autocomplete address form, geolocation addon, google maps

---