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:

1. You can search for international addresses
2. Users are encouraged to type their address naturally – starting at the beginning – whereas postcode lookup asks for the last line first.
3. It’s one field only
4. Users don’t need to select their address from a list of houses on their street

Demo

I’ve included a demo of how the address lookup works. Start typing your own address and you’ll start to see suggestions.

Download

You can download the free address lookup script from GitHub or just copy the code from the tutorial below.

Code can be found on CodePen

Setting up address-lookup

For this setup we assume that you’re able to edit the javascript file options and HTML to match your field setup.

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.

1. Create your Google Cloud Platform account (it’s free)
2. In the menu click APIs & Services
3. Click Enable APIs & Services
4. Enable Maps JavaScript API
5. Enable Places API
6. In APIs & Services go to Credentials
7. Click Create credentials (API key)
8. Save your key somewhere for later

Lastly there are some optional but recommended steps:

1. Click Restrict Key
2. Name your key AddressLookupScript
3. Under Application restrictions select HTTP referrers (websites)
4. Add an item
5. Enter the URL of the page you’ll use this script on
6. Under API restrictions select Restrict key
7. Select Maps Javascript API and Places API
8. Save

Setup the script

You’ll need to make a few edits to the Javascript options in order to get this script to work with your Google Account.

In the Javascript you’ll need to edit line 10 and replace the API key in the example with your own.

googleCloudAPIKey: 'AIzaSyBVrqGDBqE85jvuaOO6-bXBTywbfCzoET0',

Address fields

If you’re unfamiliar working with Javascript and cannot get the Javascript working with your existing form then you should use the HTML, CSS and Javascript from the demo and tweak your form around that.

<fieldset class="jls-manual-address jls-manual-address--hidden">
    ...
</fieldset>

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 you’re implementing this script into an existing form then you may need to adjust the field names in the Javascript options.

manualFieldNames: {
    address_line_1: 'address_line_1',
    address_line_2: 'address_line_2',
    city: 'city',
    county: 'county',
    postcode: 'postcode',
    country: 'country'
}

Errors

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.

---

Setup service

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.