Simple Postcode Lookup with Popups Tutorial

This article describes how to quickly add postcode lookup functionality into your existing website in seconds, with no coding required!

When you've finished, your web page that currently just has simple text boxes for the user to input their address will also have a "Find Address" button that will bring up a popup screen that allows the user to enter their postcode, select their address from a list and fill in your existing form automatically.

If you haven't already registered for our address capture service, you'll need to do so now. Just fill in our quick registration form to get started. One of our account managers will contact you to ensure you get set up with the address capture package that is best for you.

Now let's get down to the details. In your web page editor, bring up the page that you use at the moment to enter address details on. At the moment you'll probably have a page that looks something like this:

To start adding the postcode lookup option, copy and paste the following HTML code into your page next to one of the address text boxes:

            <script type="text/javascript" src="http://webservices.data-8.co.uk/SimplePostcodeLookup/config.ashx">
            </script>
        

Refresh the page in your web browser and you should now see a "Configure Address Lookup" button.

Before clicking the new button, you must indicate where you want the various parts of the address to be placed after it has been captured. To do this, enter "line1", "line2", "line3" etc in the text boxes where you want each line of the address to go. If you always want the town and county in the same boxes, enter "town" and "county" in these boxes. Finally, enter "postcode" in the box you want the postcode to go into.

Now click the "Configure Address Lookup" button. You'll be asked to enter your Data8 username and password, and the type of address capture licence to use. If you're not sure what to select here, please contact your account manager so they can advise you on what is the best deal for you.

Enter your login details and click Login. You'll then be shown a new screen that contains a customized section of HTML code that you can copy and paste into your web page.

In your web page editor, copy and paste this HTML code into your web page, replacing the code you added earlier to display the configuration button. If you now refresh your web page in your web browser you will see a "Find Address" button:

That's it! With just a little copying & pasting you've added a complete postcode lookup solution to your website.

Your users can now click your "Find Address" button and be shown a popup screen to enter their postcode into:

Just type in a postcode and click "Find", and a list of all addresses in that postcode is shown.

Select an address from the list and click "Select", and all the details of the selected address will be filled into your original form, in the places you selected in the initial configuration step.

If a user does not know their postcode, they can still accurately enter their address by clicking on the "I don't know my postcode" link. They will then be asked to enter any building, street and town details they can, and they will be shown a list of matching addresses to choose from.