Skip to main content

Addressfinder integration for HubSpot-hosted forms

These instructions will show you how to add the Addressfinder address autocomplete to a HubSpot form. 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.

For an overview of this integration, visit the HubSpot integration page.

To add Addressfinder to an externally hosted HubSpot form, follow the integration instructions here

These instructions can also be used for integrating the email and phone verification widgets into your form.

Before you start

Before adding address autocompletion to your HubSpot form, we are expecting you to have a pre-existing HubSpot form with the following address elements:

  1. Address Line 1
  2. Address Line 2 (optional)
  3. Suburb
  4. State
  5. Postcode

If your form has a different configuration of address fields, the widget can still be used on these.

Video walkthrough

Step by step

1. Add widget code to your HubSpot page

  1. In HubSpot, navigate to Content → Website Pages.
  2. Open the website page that contains the form you would like to add Addressfinder to.
  3. Click the Settings icon.
  4. Scroll down to the Advanced section and locate Footer HTML.
  5. Paste the Addressfinder widget code below into the Footer HTML field. Changes to the Footer HTML are automatically saved.
  6. Close the settings box.
Addressfinder HubSpot Address Widget code
<script>
  (function () {
    var widget;

    window.addEventListener('message', function (e) {
      if (
        !e.data ||
        e.data.type !== 'hsFormCallback' ||
        e.data.eventName !== 'onFormReady'
      ) return;

      var addressField = document.querySelector('input[name="address"]'); // 2. Replace with your field names
      if (!addressField || widget) return;

      function initAddressFinder() {
        widget = new AddressFinder.Widget(
          addressField,
          'ADDRESSFINDER_DEMO_KEY', // 1. Replace with your key
          'AU',
          {
            address_params: {
              source: 'gnaf,paf',
              post_box: "0"
            }
          }
        );

        widget.on('address:select', function (fullAddress, metaData) {
          document.querySelector('input[name="address"]').value = metaData.address_line_combined || ''; // 2. Replace with your field names
          document.querySelector('input[name="city"]').value = metaData.locality_name || ''; // 2. Replace with your field names
          document.querySelector('input[name="state"]').value = metaData.state_territory || ''; // 2. Replace with your field names
          document.querySelector('input[name="zip"]').value = metaData.postcode || ''; // 2. Replace with your field names
        });
      }

      if (window.AddressFinder) {
        initAddressFinder();
      } else {
        var script = document.createElement('script');
        script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
        script.async = true;
        script.onload = initAddressFinder;
        document.body.appendChild(script);
      }
    });
  })();
</script>

The code required will depend on the Addressfinder service you are adding (for example, Address, Email or Phone verification) and the configuration of your HubSpot form. The code must also reference the correct fields in the form.

If you need further help, please email support@addressfinder.com.

2. Edit the widget code

  1. Replace the ADDRESSFINDER_DEMO_KEY with your licence key. You can get this key from the Addressfinder Portal.
  2. Update the field names in the code to match the fields in your form. To find the name attribute of each of your address fields, right click on each one and select Inspect. The element will be highlighted in the HTML panel - copy the value of its name attribute (e.g. input[name="address"]) and paste it into the appropriate place within your generated code. Repeat for each address and metadata field.
  3. (Optional) You may tweak the address_params values using the same settings as the classic widget code to tune your addresses for allowed addresses such as PO Boxes, etc.

3. Preview, test and publish

  1. Click Preview to check that the page loads correctly and test the Addressfinder integration. The Addressfinder service should activate once you start typing in the street address field.
  2. Once you have confirmed that Addressfinder is working correctly, click Update to publish the changes.

Important considerations

  • Make sure you are editing the correct HubSpot page.
  • Ensure the Addressfinder code is configured to target the correct form and address fields.
  • Test the integration using the published or preview version of the page to confirm that addresses can be searched and selected correctly.

Alternative options

This is a highly configurable integration. You can add email and phone verification, and their free, lite variations, into this same flow. If you have any questions, please get in touch.

To get a license key, sign up for a 30-day free trial.
Already have a subscription? Find your key in the Credentials section in the Portal.