Skip to Content

Adding an Auto-Complete Address Field to your Forms

Adding auto-complete to the address field on your forms makes a tremendous improvement to the User Experience (UX).

Everywhere you can improve the User Experience is an opportunity to differentiate yourself from your competitors  and adding auto-complete to your address forms does just that. This article shows you how to add auto-complete to any form requiring an address. By doing so, you improve the user experience while also ensuring that the addresses submitted are valid by using the power of Google Maps.

Below is the code and styling needed to add auto-complete to your address forms. Enjoy!

Step 1 - Add the HTML below to where you'd like your Address Form to populate.

Step 2 - Replace the API key with that of your website. You can get a Free Google Maps API key here.

Step 3 - Add the JavaScript below to a file called auto-complete.js

Step 4 - Add the following includes to the web page where your Address Form will live

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev