Nobody likes filling webforms!
Filling a webform can be time consuming and make your user leave your page without completing it. This is why making this process easy is very important if you want to improve your conversion rate. One of the longest and commonly required field to fill is your address because one or more inputs are required and it’s fairly easy to make a mistake. Address autocomplete to the rescue..
I came across this script recently which I think is worth sharing: “Algolia Places”. It allows you to implement an address autocomplete field on your page in seconds. It’s also very fast and the user experience is very good. On top of this, you can customise it however you like (e.g: you can show a map with suggested places and fill multiple fields) and, of course, it’s mobile friendly.
Let’s have a look at how to implement it. I’m also including a demo below so you can play around with the most basic example: one input containing the full address.
Implementing the address autocomplete field
Nothing fancy here. Add the script to your page wherever you think it should be loaded depending on how soon it’s needed. The scripts are hosted on a CDN so it should load fast. Add your input and voilà! You will find more detailed instruction in the documentation. Enjoy!
Code
<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>
<input type="search" id="address-input" placeholder="Please enter your address" />
<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>
<script>
var placesAutocomplete = places({
container: document.querySelector('#address-input')
});
</script>
Demo
Feel free to let us know if you use anything similar that you think works better! Also, any comment is most welcomed! We just started a ‘community page’ on Google plus so that you can share links related to web design and development! See you there.
Source: External Link