Use Google Maps for Address Autocomplete in Web Form
In order to make address field autocomplete on your website, we need to pull address data from somewhere. A simple and fast way is to use google maps API. Simply place bellow code in the footer.php if you are on the WordPress.
Obtaining Google API Key
Now you will want to go to the Google API Console and create a project to obtain API key. Name the project to your liking something like “address autocomplete” and follow along as google makes it really easy to enable and acquire the API key. The Library that you need to enable is “Google Maps JavaScript API”. Once you have the key just place it in the above code and you should be good to go. There could be two additional things that you may need to do in case your autocomplete does not work. We will address these bellow later.
Adding the Address Field to Contact Form 7
Simply place following code to your contact form 7 and make sure if you change the “your-address” in the primary code that we placed in the footer.php, that you change it accordingly in the form.
[text* your-address id:your-address class:form_input placeholder "Address"]
Possible Issues
If your form will not autocomplete and you completed all the steps above we have come across two very frequent solutions:
- Simply enable “Google Places API web Service” – see image above
- Add API key restrictions *.yourdomain.com/* – see image bellow
