Before you start

This guide will get you started with the Web Client pop-up implementation for UK address look-ups. We also have separate guides for setting up an inline UK address finder, an international address finder and a store locator.

1. Your page

This tutorial assumes you have an existing web page containing a form. The HTML for your address form may look something like this:

<form method="post">
	<table>
		<tr>
			<td>Postcode</td>
			<td><input type="text" name="postcode" size="10"></td>
		</tr>
		<tr>
			<td>Company name</td>
			<td><input type="text" name="company" size="40"></td>
		</tr>
		<tr>
			<td>Line 1</td>
			<td><input type="text" name="line1" size="40"></td>
		</tr>
		<tr>
			<td>Line 2</td>
			<td><input type="text" name="line2" size="40"></td>
		</tr>
		<tr>
			<td>Line 3</td>
			<td><input type="text" name="line3" size="40"></td>
		</tr>
		<tr>
			<td>Town</td>
			<td><input type="text" name="town" size="40"></td>
		</tr>
		<tr>
			<td>County</td>
			<td><input type="text" name="county" size="40"></td>
		</tr>
	</table>
</form>

2. Set up your account

To get started with the integration you need to set up your account with a key. (Remember, if you don't have an account you can get a free trial here.) At the end of the process you will see the JavaScript that you need to copy and paste into your page.

Add the code to your page

Now you need to paste the JavaScript into the source code of your page. We recommend putting the code to the right of your postcode text box, and moving that field to the top of your form. That way, the first thing people will see when they come to enter their address is the postcode field with a look-up button next to it.

<tr>
	<td>Postcode</td>
	<td>
		<input type="text" name="postcode" size="10">
		<SCRIPT LANGUAGE="JAVASCRIPT" SRC="http://services.post...">
		</SCRIPT>
	</td>
</tr>

Once you've done that, save the page and upload it to your website, then open it in a browser.

Set up the pop-up

When you view your page in a browser you will see a set-up button next to your postcode field. Click the button to open the set-up window.

First you need to tell the address finder how your address form is set up. In our form here we have 3 individual lines for the address, and the company name is a separate field. Then, choose the field that is going to be used by the user to find their address - the postcode field.

Next, you can add extra datasets to be returned with the address, such as grid references or Acorn® type. Of course, if you just want address data you can ignore this step.

Finally you need to tell the address finder which of your form fields you want mapped to our address fields. Simply pick your field from the dropdown and select which address field it matches in the second dropdown.

That's it. Refresh your page and you'll notice that the button next to the postcode field has changed and is ready to use.

Of course, there is a lot more that you can do with our service. We have more tutorials available here which should tell you everything you need to know. And don't forget, if you get stuck we're just a phone call away!