UK postcode lookup for HubSpot forms
Visitors type a postcode, pick their address from a list, and the address fields on your HubSpot form fill in. It works with forms built in HubSpot’s forms editor, including conditional fields.
Before you start
- You need a GetAddress Enterprise plan. It includes 500 postcode searches a month across all your forms.
- The form must be built in HubSpot’s new forms editor and embedded on your own website or a HubSpot CMS page. HubSpot share-link form pages can’t run extra code, so they aren’t supported. Legacy forms aren’t supported either.
- Use single-line text fields for the address. Dropdown fields only accept their own options, so they can’t be filled with an address.
- UK postcodes only.
Add the lookup to a form
Create a key
Open the HubSpot Forms postcode lookup section of your profile. Give the key a label and list the websites your form appears on, one per line, for example www.example.com. *.example.com covers every subdomain. Then click Update Profile.
Pages must use https. To test on a HubSpot preview link, add that link’s exact address too, for example 12345678.hs-sites-eu1.com. Wildcards aren’t accepted on shared domains like hs-sites.com, because they would let other people’s sites use your key.
Find your field names
In HubSpot, open Settings → Properties and copy the internal name of each address property. Add the prefix for the object the form writes to: 0-1/ for contacts, 0-2/ for companies, 0-5/ for tickets. The standard contact fields are 0-1/address, 0-1/city and 0-1/zip.
If the lookup should only appear for some answers, note the trigger field’s internal name and the values that should show it. For dropdowns and radio buttons, use each option’s internal value from the property settings. If you aren’t sure, list both the label and the value.
Build the code
Back in your profile, fill in the Embed code generator: the form ID (data-form-id in your HubSpot embed code), your embed type, the trigger, and the field names. Copy the result.
Paste it above your form
Paste the code into your page before the HubSpot embed code. On a HubSpot CMS page, use a custom HTML module above the form, or the page’s Head HTML (page settings, Advanced). It should look like this:
<script>
window.GetAddressForms = {
"key": "gaf_live_your_key",
"forms": [{
"formId": "your-hubspot-form-id",
"showWhen": {
"field": "0-5/delivery_address_type",
"in": ["Alternative company address", "Employee home address"]
},
"fields": {
"line1": "0-5/address_line_1",
"line2": "0-5/address_line_2",
"town": "0-5/city",
"county": "0-5/county",
"postcode": "0-5/postcode"
}
}]
};
</script>
<script src="https://www.getaddress.org/forms/v1.js" defer></script>
<!-- Your HubSpot form embed code goes here -->Test it
Open the page, choose an answer that should show the lookup, enter a postcode such as SW1A 1AA and pick an address. Check the fields fill in, then submit a test entry. If nothing appears, open the browser console: messages starting [GetAddress] explain what to fix, such as a website missing from the key.
Standard and developer embeds
Standard embed
The usual HubSpot embed code (hs-form-frame), available on every HubSpot plan. The form loads in a frame, so the lookup sits just above the form and fills the fields below it.
Developer embed
The hs-form-html embed, which needs Marketing Hub or Content Hub Professional or Enterprise. The form is part of your page, so with inline: true the lookup sits directly above the address fields.
https://www.getaddress.org in both script-src and connect-src.
Settings reference
| Setting | What it does |
|---|---|
| key | Your public key from your profile. It only works on the websites listed against it. |
| formId | The HubSpot form ID (data-form-id in the embed code). Leave it out to use the settings on every form on the page. |
| fields | Which form fields to fill: line1, line2, town, county, postcode. Use the full internal name with its prefix, for example 0-1/zip. Leave out any you don't have; without line2, the second line is added to line1. |
| showWhen | Optional. { field, in } shows the lookup only when the field has one of the listed values. Without it, the lookup always shows. |
| inline | Developer embed only. true puts the lookup directly above the first address field instead of above the form. |
| mount | Optional. A CSS selector for where to put the lookup, for example #getaddress-lookup. By default it goes just above the form. |
| step | Multi-step forms. The step number (1, 2, 3...) the address fields are on; the lookup only shows on that step. |
| text | Optional. Replace any wording, for example { "heading": "Delivery address" }. |
To match your site’s look, set these CSS variables on the page: --gaf-accent, --gaf-accent-text, --gaf-border, --gaf-background, --gaf-radius and --gaf-error. Every element uses a gaf- class.
Allowance and privacy
- Enterprise includes 500 postcode searches a month. Choosing an address from the results is free. Your profile shows how many you’ve used.
- To protect your allowance if your key is copied, each key can make up to 125 searches a day, and each visitor is limited to a few searches a minute.
- When a limit is reached, the form still works: visitors see a short message and type their address in.
- Your key is visible in your page’s source, which is expected. It only works from the websites you list, and you can revoke it at any time from your profile.
- The visitor’s postcode is sent to GetAddress to find addresses. We log each request (time, key and IP address) to enforce limits and prevent abuse. Form answers are never sent to us.