Our JavaScript popups are the quickest and most convenient way to start using Postcode Anywhere on your website. You don't need any special development skills, you just need to copy and paste some automatically generated code and follow the wizard steps!

This tutorial takes you step by step though setting up the JavaScript Popups on a simple HTML page. It only takes a few minutes and you can customise them later!

Before starting this tutorial, we need to create a simple HTML page which we will add the popups to. In this example we've put the postcode field at the top of the page so that the customer doesn't first begin entering their address before they see the auto complete facility:

<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>

The first step is to run the account setup wizard in "My Account". This should be fairly self explanatory but the choices/steps are:

• "I want my customers to be able to fill their addresses in quickly on my web site"
• "Popups (recommended)"
• Enter the name for your popup
• Finally copy the Javascript to the clipboard (see below)

Now you need to copy the JavaScript onto your page. You should place it immediately to the right of the postcode text box. This is where the button will be placed when you're up and running.

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

Now you just need to upload your page and open it in a browser.

When you view your page in a browser, you will see a setup button. You need to click on the button which opens the setup popup window.

Follow the steps to describe how your address lines are set up on the page. In this case, we have 3 individual lines for the address and the company name separated.

Next you need to select the field which contains the postcode to find automatically when the popup opens.

You're not limited to returning an address either - you can also get other information returned to your page like grid references or Acorn® type. (Note: a separate license agreement is required fo you to access Acorn® data.)

Finally you need to associate your fields with ours. Just pick your field and which of ours it matches to in the list before finishing the wizard.

You're done! Just refresh your page and you'll see that the button changes and is ready to use. It's that easy!