X

How to Create Autocomplete Address Form in WordPress

How to Create Autocomplete Address Form in WordPress

Do you want to create autocomplete address form in WordPress?

An autocomplete address form is the modern way to save customers’ time by automatically suggesting their address while filling out a form.

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

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

In this article, we’ll show you how to create autocomplete address form in WordPress.

Create Autocomplete Address Form in WordPress

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

Step 1. Install and Activate WPForms Pluign

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

wpforms-contact-form-plugin

WPForms is hands down the best form builder for WordPress. It allows anyone to quickly and easily create any kind of form for their website.

Whether you’re getting new leads or taking payments from customers, this plugin will have the form you need to grow.

For more details, you should check out our guide on how to install a WordPress plugin.

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

You can find the license key on your WPForms account.

WPForms license page

Click on the Verify Key button, and you’ll see a success message.

Step 2. Install and Activate the Geolocation Addon

Next, you need to visit the WPForms » Addons page. From there, you can install and activate the Geolocation Addon.

Geolocation Addon

This addon will help enable the autocomplete address option on your contact form.

Step 3. Enable Address Autofill Option 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.

Enable current location

Next, visit the Google Cloud Platform to get the API key for Google Places.

Note: Make sure that you enable billing on your Google account to use the address autofill feature.

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

Enable API and Services

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

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

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

Enable APIs

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

Create credentials

A popup will open, and you can see the API key. Click on the Restrict Key option to control access of the API key usage.

Restrict key

In the Application Restrictions section, you need to select HTTP referrers (websites).

Application restriction

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

Select APIs

Click on the Save button to continue.

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

Copy API Key

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

Paste API Key

Click on the Save Settings button.

Step 4. Create a New Contact Form

Once your Geolocation addon settings are finalized, you need to create a new contact form. You can also use the “enable the autocomplete address” option on previously created forms.

To create a new form, go to WPForms » Add New. It’ll open the WPForms builder on your screen, and you can see built-in form several templates.

Start by entering a name for your new form and click on the Simple Contact Form template.

Simple contact form

It’ll launch the contact form template. You can see the fields on the left side and the form preview on the right side of your screen.

In the Fancy Fields section, you’ll find the Address field. Simply drag and drop the Address field to your form preview on the right side.

Address field

Now, click on this address field in the form preview section, and you’ll see the editing options on the left-hand side.

In the Advanced Options, you need to checkmark Enable Address Autocomplete option.

Enable address autocomplete

Click on the Save button from the top right corner of your screen and exit the WPForms builder.

Step 5. Add the Autocomplete Address Form to Your WordPress Page

Now that your autocomplete address form is ready, you can visit the Pages » Add New page from your WordPress admin area.

Start by adding a title to your page and click on the plus icon. Now you can search for WPForms custom block and click on it.

WPForms block

In the drop-down menu, select the autocomplete address form.

Select form

Click on the Publish button and visit your website to see the contact form with autocomplete address field in action.

Form preview

And that’s all! You’ve now successfully learned how to create autocomplete address form in WordPress.

You may also want to check out our guide on how to add a custom booking form to your WordPress site.

This can further help you create an online appointment booking form and add the autocomplete address field to get user signups on the go.

Comments  Leave a Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[63% OFF Today!]
[63% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]