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
- Global address autocomplete
- Quick and straightforward setup
- Only pay when a full address is retrieved, with credit packs from £25
- Uses the autocomplete/find and autocomplete/retrieve API endpoints
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 trial2. Create an address form
Create an address form and add the following fields onto it:
Field type | Field label |
---|---|
Dropdown | Country |
Single Line Text | Start typing your address or postcode |
Single Line Text | Address line 1 |
Single Line Text | Address line 2 |
Single Line Text | Town / City |
Single Line Text | County / State |
Single Line Text | Postcode / 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 settings6. 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.