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).

Adding an Auto-Complete Address Field to your Forms

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

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.