🌐WEBFINET

Generic selectors
Exact matches only
Search in title
Search in content

How to Add Autocomplete for Address Fields in WordPress ctm magazine



Users have asked us how to add autocomplete for address fields in their WordPress forms. Autocomplete allows your visitors to quickly select an address form suggestions generated in realtime as they type. In this video we’ll show you how to add autocomplete for address fields in WordPress using the Google Places API.

Text version of this tutorial:
http://www.wpbeginner.com/plugins/how-to-add-autocomplete-for-address-fields-in-wordpress/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this tutorial:

For this tutorial we will be using the plugin: Address Autocomplete Using Google Place API.

https://wordpress.org/plugins/address-autocomplete-using-google-place-api/

With the plugin activated you will go to Settings, Google Autocomplete to configure the plugin’s settings.

It will ask for your Google Places API Key, the key allows your website to connect with Google Maps and retrieve autocomplete suggestions from their database.

You will want to visit Google’s Developer console website and create a new project, the developer console website can be found here:

https://console.developers.google.com/apis

Provide a name fir your project, we would recommend one that lets you identify what it is for.

You should automatically be redirected to your new project which lists the popular Google APIs you can use in your project.

Select the Google Places API key and press the enable link near the top of the page.

Click the create credentials for you to be able to use the API, as well as the What credentials do I need button, and you should see the API key you need to copy over to your WordPress plugin.

For your project you will also need to go to your library and also enable the Google Maps Javascript API and press the enable link in there as well.

You can add the autocomplete to any field in a form plugin by viewing the page the form is on and right clicking to inspect element the object.

Copy the name, ID, or CSS values for the field and paste it into the settings page.

If you would like to select multiple fields just add a comma for adding the new ID/name.

source

22 Comments

  • Mike Mendizabal on December 5, 2019

    I can't find the right tutorial anywhere to do the same thing for Android. Do you have an Android tutorial on this?

  • Ayyaz Reshi on December 9, 2019

    which forms plugin are you using? the one i use which is Ultimate Member does not work with what you mentioned here.

  • Syed Shah Zahurullah Hussaini on April 16, 2020

    Can we restrict lookup area to a specific state?

  • fantastic thoughts on June 2, 2020

    your videos are awesome bro please help me bro
    Do you know a plugin that recognises the visitors location and autofill when they go to the checkout?
    like amazon plz suggest me

  • ahnaf ilyas on June 25, 2020

    how can i use this for auto fill postal codes

  • dhananjay pathak on June 27, 2020

    getting this error "This page can't load Google Maps correctly." help me out

  • Ananda Vishnu on July 4, 2020

    This feature will work only in pro…??

  • Life on July 18, 2020

    how to incorporate for one only one tab of the booking search form please? I have 'where' check in, check out tabs and if I want to associate the plugin only with 'Where' tab how to work out Mam please. Would you kindly explain or give a video please. I would be grateful. Also I would be interested to know other function of payment plug in please. Thank you

  • Platovon Consulting Channels on August 1, 2020

    Thanks a lot for this video. Please how can i you this to customize the billing address field in my woocommerce checkout page?

  • Believer University on August 9, 2020

    Would you please update this? You do a great job explaining it but it's 3 years old and outdated. Thank you.

  • matt o on August 18, 2020

    How about autocomplete for other types of content? I want to create a list of drugs for patients and use it for autocomplete purposeses? I use caldera forms at the moment

  • Lewis Burton on September 5, 2020

    does this work for zip code?

  • Ahmad Rezwan on September 24, 2020

    Hello there, a wonderful video thanks. i have a question. Currently i am working on a website that needs the function which enable user to search using the zip. for instance the user will put zip code of hi/her area than in result they will get the available companies in that area. can you suggest me something for this. thanks

  • Hitesh Mishra on October 17, 2020

    Mam please make a video on how can we show products according to our customer location ie by city and state for Free. Please make a video on this topic.🙏🙏

  • Tanay Arya on October 27, 2020

    api used in video is it free?

  • VenderCentral Directory & Listing on December 21, 2020

    I have an ecommerce website with a Delivery driver app integrated into the website. The app needs to get the Latitude and Longitude of the customers address. How can I get the latitude and longitude on my website?

  • Women Entrepreneurs Network, Northshore on February 8, 2021

    Will this still work in 2021? for the Divi contact form module? I inputted all the US states in a dropdown field and it doesn't work live, When clicked it reloads the whole page what am I doing wrong?

  • Susan Slattery on March 9, 2021

    Hi. It's says untested with your version of WordPress. Any chance you are going to be updating it or testing it?

  • hector lohaus on July 28, 2021

    is there any cost on the apis ?

  • Mr karan_(KK) on August 23, 2021

    Haw to add current location function

  • Urethral Vector on December 22, 2021

    How do you do it for car categories instead of google places, like api for items searchable in forms?

  • Urethral Vector on December 23, 2021

    WPBeginner – WordPress Tutorials can you please do an updated version of this video on how to follow the google api steps on the new google interface please 🙂 <3

Since 2009- Live News and Entertainment

🌐WEBFINET

🪙Premium Domains plus WordPress  🛡Open your own  Online Store 🏦 Open your own web hosting

Generic selectors
Exact matches only
Search in title
Search in content
error: WEBFINET SECURITY IS ON