Cookie

Cookie consent

We use some essential cookies to make this website work. We'd like to set additional cookies to help us measure your experience when you view and interact with the website.

Cookie policy

Setup guide for address lookup

This guide outlines how to integrate Postcoder address autocomplete into forms, pages and websites using the Postcoder integrator-js JavaScript library. While this is a general guide, the steps are broadly the same regardless of what you're integrating into. It may be particularly useful if you're working with platforms or plug-ins such as:

For help integrating Postcoder's other features, check out the sample code for bank validation, email validation, mobile validation and OTP verification.

Key features

1. Get an API key

You'll need an API key to start using Postcoder. Sign up for a free trial of Postcoder and you'll get one with 200 trial credits for testing. We don't ask for your payment details and you can request additional trial credits if you need them.

Start a free trial

2. Create an address form

Create an address form and add the following fields onto it:

Field typeField label
DropdownCountry
Single Line TextStart typing your address or postcode
Single Line TextAddress line 1
Single Line TextAddress line 2
Single Line TextTown / City
Single Line TextCounty / State
Single Line TextPostcode / ZIP Code / Postal code
<label for="country">Country:</label>
<select id="country" name="country">
	<option value="uk">United Kingdom</option>
	<option value="us">United States</option>
	<!-- All other countries supported -->
</select>

<label for="search_input">Start typing your address or postcode:</label>
<input type="text" id="search_input" name="search_input">

<label for="address-line-1">Address line 1:</label>
<input type="text" id="address_line_1" name="address_line_1">

<label for="address-line-2">Address line 2:</label>
<input type="text" id="address_line_2" name="address_line_2">

<label for="city">Town / City:</label>
<input type="text" id="post_town" name="post_town">

<label for="state">County / State:</label>
<input type="text" id="county" name="county">

<label for="postcode">Postcode / ZIP Code / Postal code:</label>
<input type="text" id="postcode" name="postcode">
Create a form with the following fields:

1. Country
Type: Dropdown, id="country"
Options:
- United Kingdom, value="uk"
- United States, value="us"

2. Start typing your address or postcode
Type: Single-line text input, id="search_input"

3. Address line 1
Type: Single-line text input, id="address_line_1"

4. Address line 2
Type: Single-line text input, id="address_line_2"

5. Town / City
Type: Single-line text input, id="post_town"
								
6. County / State
Type: Single-line text input, id="county"

7. Postcode / ZIP Code / Postal code
Type: Single-line text input, id="postcode"

Edit the country dropdown and include the countries you want to support. Ensure that each list item has a name (the country name) and a value (its 2-character country code). To limit to just one country, without a dropdown, see the Customisation options.

Save the form.

3. Set up your page

Add a new page or edit an existing one.

Add the form you just created to the page. The method for doing this will depend on the platform you're using. For example, in WordPress, you can embed your form using a shortcode.

Below the form, add a custom HTML block and paste the following code into it:

<script src="https://cdn.jsdelivr.net/gh/postcoder-api/integrator-js@v2/build/integrator.min.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const postcoder = new PostcoderAddressAutocomplete({
			apikey: 'YOUR_API_KEY',
			country: '#country',
			searchinput: '#search_input',
			outputfields: {
				addressline1: '#address_line_1',
				addressline2: '#address_line_2',
				posttown: '#post_town',
				county: '#county',
				postcode: '#postcode',
			},
		});
	});
</script>

Replace YOUR_API_KEY with the API key you received via email after signing up for a Postcoder trial in step one.

Replace the input and output field names (e.g. #country, #address_line_1) with the correct query selector for each form field, such as an ID (#country) or name attribute selector ([name="country"]).

Save the page.

4. Test your page

View your page and confirm that address suggestions appear as you type, and that the form is correctly filled when you select a suggestion. Use the Customisation options to make changes if required.

5. Review API key security

Before you go live, read our guidance on API key security and then adjust your own API key security settings if needed. You can rate limit your API key and lock it down to trusted website URLs.

Review your API key security settings

6. Buy credits and go live

To go live, all you need to do is buy a credit pack or set up a monthly plan. There are different sizes to suit your requirements and prices start from just £25. Speak to our team if you have any questions.