Adding an address auto-complete field or postcode lookup, as they are sometimes referred to, is not as difficult as you may first think. I’ve created a simple, free to use, plugin/widget that can be added to your website with little code knowledge needed.
In my work on the checkout flow for the EKM platform we found that the number of form fields a customer is faced with directly affects how likely they are to complete the form. We reduced the number of fields using a post code lookup service.
Post code lookup is great, but it only really works if you’re in a country with a post code system and the one used on EKM only works with UK addresses.
Cheaper and simpler alternative to post code lookup
For a recent client project I implemented an inexpensive address lookup powered by Google Maps and it’s worked well for that client because their customer details page only needs to have 3 required fields – name, email address and address (which is an auto complete).
In my spare time I decided to rewrite the address lookup in a more generic way so it can be slotted into any website that has standard address fields (address line 1, address line 2, town/city, county, post code and country).
Cost per lookup
- Google Cost: 0.21p per request
- EKM Postcode Lookup: 10.79p per request (100 lookups for £10.79 package)
Note: With Google a single address lookup could consist of multiple requests. But to even match the post code lookup cost each address would need to result in over 50 requests – which is unlikely.
What is address lookup?
Address lookup is better than post code lookup for a few reasons:
- You can search for international addresses
- Users are encouraged to type their address naturally – starting at the beginning – whereas postcode lookup asks for the last line first.
- It’s one field only
- Users don’t need to select their address from a list of houses on their street
I’ve included a demo of how the address lookup works. Start typing your own address and you’ll start to see suggestions.
You can download the free address lookup script from GitHub or just copy the code from the tutorial below.
Setting up address-lookup
If you’re unable to get this working with your existing form feel free to send me an email and I’ll help set it up for you.
Google Cloud Platform
This plugin is powered by Google Maps data and therefore you will need a free Google Cloud Platform account.
When you signup Google give you a free $300 credit for your first year. Depending on how many lookups your users perform will depend how long that credit lasts for.
- Create your Google Cloud Platform account (it’s free)
- In the menu click APIs & Services
- Click Enable APIs & Services
- Enable Places API
- In APIs & Services go to Credentials
- Click Create credentials (API key)
- Save your key somewhere for later
Lastly there are some optional but recommended steps:
- Click Restrict Key
- Name your key AddressLookupScript
- Under Application restrictions select HTTP referrers (websites)
- Add an item
- Enter the URL of the page you’ll use this script on
- Under API restrictions select Restrict key
Setup the script
line 10 and replace the API key in the example with your own.
<fieldset class="jls-manual-address jls-manual-address--hidden">
In the HTML you’ll notice a
<fieldset> element that contains all the standard address fields. When an address is selected each of the fields gets a value added. These are also the fields that show when the user edits the address manually.
If, after editing the API key, you’re enable to perform any lookups without a tiny little error icon appearing then it’s likely down to your Google Cloud Platform settings and probably the URL of your website that is incorrect.
If you’re having trouble getting this setup on your website or EKM shop feel free to get in touch, i’d be happy to help.
You can use this address lookup as an alternative or replacement to EKM Postcode Lookup feature. This has successfully been installed on a number of EKM shops and those shop owners are very happy because it’s saving them a lot of money and increasing their conversions.
Want to make your website accessible for everyone?
Why, you might ask? Because it’s good for business! Businesses with accessible websites have a 31% increase in traffic. We offer website accessibility reviews performed by real people.