How to Create an Auto-Complete Address Form in WordPress

An auto-complete address form is the modern way to save customers time by automatically suggesting their address while they fill out a form.

As soon as a customer starts typing their address into the address field, options are displayed to select and fill in their address from Google locations.

By default, WordPress does not come with an address autocomplete option. You need to use a plugin like WPForms to create a contact form and enable the autocomplete option for the address field.

In this article, we will show you how to create an auto-complete address form in WordPress.

Create an auto-complete address form in WordPress

Below you will find the step-by-step guide to add the address autocomplete form to your WordPress website.

Step 1. Install and Activate WPForms Install and Activate WPForms Plugin

The first thing you need to do is install and activate the WPForms plugin .

WPForms makes it easy for anyone to quickly and easily create any type of form for their website.

Whether you’re getting new leads or taking payments from clients, this plugin will have the form you need to grow. That’s why it’s our #1 choice when it comes to creating forms in WordPress. We use it on our own site to create any type of form we need, including contact, login, registration, and more.

The first step you need to take is to sign up for WPForms and install the plugin on your site. For more details, you should check out our guide on how to install a WordPress plugin .

After activation, you will need to enter a license key to use all the features of the WPForms plugin.

You can find the license key in your WPForms account.

Click the Verify Key button and colombia phone number library you will see a success message.

Step 2 Install and activate the geolocation plugin

Next, you need to visit the i have tested the top 3 optinmonster alternatives and here are my feedbacks WPForms » Addons page . From there, you can install and activate the Geolocation Addon .

This plugin will help you to enable autocomplete address option snbd host on your contact form.

Step 3. Enable address autofill and add Google Places API key

You need to visit the WPForms » Settings page . From there, you can go to the Geolocation tab from the top navigation menu.

In the Places Provider section , you can select Google Places API and check the current location option below.

Next, visit Google Cloud Platform to obtain your Google Places API key.

[alert style=”info”] Note: Make sure that you enable billing on your Google account to use the address autofill feature.[/alert]

On this page, you need to click on the Enable API and Services option .

This will show you the full list of Google APIs and services. You need to enable the following APIs:

• Google Places AP
• Google Maps JavaScript API
• Geocoding API

If you can’t find an API, you can type the name in the search box and it will appear below.

Now go to API & Services » Credentials . From there, you need to click on the + Create Credentials link and then click on the API Key option .

A pop-up window will open and you will be able to see the API key. Click on the Restrict Key option to control access to the use of the API key.

In the Application Restrictions section , you need to select HTTP Referrals (Websites) .

In the API Restrictions section , check the Restrict Key option and select the 3 APIs you enabled earlier.

Press the Save button to continue.

Your API key is ready. Copy the API key from this page.

Now go back to the WordPress admin area and paste the API Key into the Geolocation settings page.

Click the Save Settings button .

Step 4. Create a new contact form Create a new contact form

Once you have finished setting up the geolocation plugin, you will need to create a new contact form. You can also use the “enable auto-complete address” option on previously created forms.

To create a new form, go to WPForms » Add New . The WPForms builder will open on your screen, and you can see the various built-in form templates.

The contact form template will launch. You can see the fields on the left side and the form preview on the right side of the screen.

In the Fancy Fields section , you’ll find the Address field . Just drag and drop the Address field into the form preview on the right.