How to Add Autocomplete for Address Fields in WordPress

Adding Autocomplete For Address Fields in WordPress

Are you facing difficulty to add autocomplete for Address fields in WordPress. This can be done by a plugin Address Autocomplete using Google place API.

Google Autocomplete Address plugin provides real-time suggestions to the visitors as they type. This article provides you with all the possible guidelines which can make you able to add Autocomplete for Address fields in WordPress

How to Add Autocomplete for Address Fields in WordPress?

Also, try these suggestions by TheFanmanShow

Carefully read all the steps given below;

  • Install and activate Address Autocomplete using Google place API. If you want to download this plugin CLICK HERE.

    For more useful plugins you can see our step by step guidelines for more suitable Google AdSense WordPress plugins in 2019
  • After activation, go to Settings > Google Autocomplete page to configure plugin settings

google address auto complete settings

  • Now, you have to put Google Place API key which connects your website to the Google Maps and retrieve the autocomplete suggestions from Google’s database in real time.
  • Now you should move to Google Developer Console website to create a new project.

google API Create Project

    • A pop-up will appear which ask you about the name of your project and you should use the name which can easily identify the project.
    • After putting the project name, the pop-up will disappear and you will be directed toward the new project within 2 seconds

  • A list of popular Google APIs will appear from which you can select for your project. For this, you have to click on Google Places API Web Service

Google Places API Web Service

  • An overview page will appear which explain how this API works
  • You have to click on the Enable button to continue

How to enable google API Web Service

  • At this stage, Google Developer Console will enable Google Places API for your project
  • Now, you have to click on the Create Credentials button to go ahead
  • Click on What Credentials do I need? available on the next screen

How to Add Credential to your API Web Service

  • This time developer console will provide you the API key
  • Copy that API key and paste it in plugins settings on your WordPress site

Add Credential To tour project google api

  • According to the requirements, you still need to enable another API on your project
  • Click on the Library in Google developer Console
  • A list of Google Maps APIs will appear
  • From the list, click on Google Maps JavaScript API
  • APIs overview page will appear where you have to click on the Enable button to continue. Here is no need to put another API to enable google javascript api

Enabling Autocomplete Address feature:

The Autocomplete Address feature can be enabled to any form field created by WordPress Form Builder Plugin. Here, WPForms is used to enable Autocomplete address feature.

  • You have to create a form that has address field or group of address fields
  • Add the form you created to your website
  • Now, go to the page where you added the form
  • Here, right click on the address field and choose Inspect from browser’s menu

how to inspect id and class in wordpress

  • Here, you will see Name, ID and CSS class values for address fields
  • Copy these values and put in the Plugin Settings page
  • For multiple fields, you have to put a comma at the end of value and paste another value for another field

google address auto complete settingss

  • In the end, don’t forget to click on the Save button to store the changes you made

Finally, you can visit the page of your site and put an address, the form field will automatically show possible suggestions with help of Google maps and Google Places.

google address

This is how to download and install Google Autocomplete Address plugin with necessary settings.

Final Words

Hopefully, this article will help you to add Autocomplete for address fields on your WordPress site. If you have some experience and suggestions about this article, you can share with us via comments.

Leave a Reply