If you need to host a Hubspot form on an external webpage, you should read the
Integration instructions for embedded Hubspot forms.
What is the Addressfinder embed for Hubspot?
The Addressfinder HubSpot address verification embed adds a predictive autocomplete to the address fields within your HubSpot-hosted forms.
Installation Instructions
- These instructions will show you how to add the Addressfinder embed to Hubspot. You can learn more about this service on our Addressfinder embed for Hubspot page. Your form should already be working well - just with manual address entry. We will enhance this form to integrate the Addressfinder widget, and enable autocompletion of verified addresses.
- Screenshot of example Hubspot form with Addressfinder Embed
Before you start
- Before adding address autocompletion to your HubSpot form, you’ll need to have the following:
- 1. An existing Hubspot form, embedded on a landing page or Hubspot-hosted web page.
- 2. The form should already have the following address elements:
- Street
- Suburb
- City
- Region (optional)
- Postcode
- Country (optional)
- 3. You’ll need an Addressfinder licence key (any trial account will work fine).
- 4. Sufficient Hubspot access to edit the settings for website pages. You’ll need edit and publish permissions.
Getting started
- 1. Log into Hubspot
- 2. In the menus, navigate to Marketing > Website > Website Pages
- 3. Select on the desired page, and click the Edit button
Taking note of the form field property names
- 1. Click on the form within the content area
- 2. In the sidebar, expand the Form Content area, to show a panel such as this. Click the pencil icon next to each element
- 3. This will reveal the property name of each field.
- 4. Write down each property name like the FORM CONFIG table below:
Field label | Property name |
---|---|
Street address | address |
Suburb | suburb |
City | city |
Region (optional) | state |
Post code | zip |
Country (optional) | country |
Preparing the code
- 1. Click on Settings icon at the top of screen
- 2. Select Website > Pages
- 3. Paste this code to the Site footer HTML field. If there is already content in the field, paste it at the bottom of the existing content.
<script>
(function () {
// **************************************************
// Addressfinder plugin for Hubspot
// **************************************************
// STEP BY STEP integration instructions here:
// https://addressfinder.nz/docs/plugins/hubspot/
var addressfinderConfig = {
// STEP 1: paste in your licence key
licenceKey: "ADDRESSFINDER_DEMO_KEY",
defaultCountryCode: "NZ",
// STEP 2 - update the property names using the values assigned within your Hubspot form
searchPropertyName: "address", // can be a separate field
addressPropertyName: "address",
suburbPropertyName: "suburb",
cityPropertyName: "city",
statePropertyName: "state", // region (optional)
postCodePropertyName: "zip",
countryPropertyName: "country", // optional (will use defaultCountryCode if not present)
// fullAddressPropertyName: "address", // if required, you can store the full address in a single field
// STEP 3 (optional): customise the addresses returned by updating the address_params values
// Examples at: https://addressfinder.nz/docs/widget_code_generator/
widgetOptions: {
AU: {
address_params: {
gnaf: 1
}
},
NZ: {
address_params: {}
},
INT: {
address_params: {}
}
},
// STEP 4: once the plugin is working, you can set debugMode to false
debugMode: true,
};
window.addEventListener("message",function(e){if("hsFormCallback"===e.data.type&&"onFormReady"===e.data.eventName){if(!document.querySelector(`input[name=${addressfinderConfig.searchPropertyName}]`))return;var d=document.createElement("script");d.src="https://api.addressfinder.io/assets/hubspot/v2/address.js",d.async=!0,d.onload=function(){new Addressfinder.Hubspot.AddressPlugin(addressfinderConfig)},document.body.appendChild(d)}});
})();
</script>
addressPropertyName: "'2-577445/street_address'"
.address_params
values. Use the output from the code generator to tune your addresses for allowed addresses such as PO Boxes, etc.Publish and test
- 1. Wait 30 seconds, and then visit the external URL of the landing page.
- 2. The autocomplete popup should display once you start typing into the address field.
- 3. Selecting an address should see the individual elements being populated into the appropriate fields.
Troubleshooting
- If you still have the
debugMode
enabled, then you can view error messages within your browserʼs Javascript console. - The most likely problem is a mis-configuration of the property names. The code above will give you a useful error message if it is unable to find the correct field.
- If this happens, you should double-check the values you wrote down in the FORM CONFIG table above. Have these values been copied into the code correctly?
- Still having trouble? Send us an email at support@addressfinder.nz, and we will have a look. Be sure to include the URL of the page, so we can debug the problem.
Advanced options
Separate search field: some people prefer to use a separate search
element for performing the address autocomplete. In this case, specify a different
value for the
searchPropertyName
and addressPropertyName
.
Then, the autocomplete will be attached to the search field, and the first line of
the address metadata will be stored in the address field.
Single address field: some people prefer a single address field,
rather than individual fields for each address element. In this case, remove the
references to
addressPropertyName
, cityPropertyName
, etc.
You only need to set searchPropertyName
and
fullAddressPropertyName
(to the same value).