Skip to main content

Addressfinder for HubSpot

These instructions will show you how to add the Addressfinder 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.

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. View the code examples below for custom address, email or phone number fields in the alternative options.

Step by step

1. Add widget code to HubSpot form code

  1. Locate and open the file/area where your current HubSpot form integration lives. It will look something like the following example:
    Example HubSpot embed code
    <script charset="utf-8" src="//js.hsforms.net/forms/embed/v2.js"></script>
    <script data-hubspot-rendred="true">
        hbspt.forms.create({
            region: "na1",
            portalId: "12345678",
            formId: "11111111-2222-3333-4444-555555555"
        }) ; == $0
    </script>
  2. Make a copy of your forms region, portalId and formId and store them somewhere nearby.
  3. Replace the HubSpot script above (everything in between the second <script> tags) with the Addressfinder widget enriched HubSpot script code below:

  hbspt.forms.create({
    region: "na1", // 1. Replace with your values
    portalId: "00000000", // 1. Replace with your values
    formId: "11111111-2222-3333-4444-555555555", // 1. Replace with your values
    onFormReady: function(form) {
      if (form.length == 1) {
        form = form[0]
      }

      var widget, initAddressFinder = function() {
        widget = new form.ownerDocument.defaultView.AddressFinder.Widget(
          form.querySelector('#address-11111111-2222-3333-4444-555555555'), // 3. Replace with your field IDs
          'ADDRESSFINDER_DEMO_KEY', // 2. Replace with your key
          'AU', {
            "address_params": {
              "source": "gnaf,paf"
            },
            "max_results": "8"
          }
        );

        widget.on('address:select', function(fullAddress, metaData) {
          form.querySelector('#address-11111111-2222-3333-4444-555555555').value = metaData.address_line_1; // 3. Replace with your field IDs
          form.querySelector("[id=\'0-2/address2-11111111-2222-3333-4444-555555555\']").value = metaData.address_line_2 || ''; // 3. Replace with your field IDs
          form.querySelector('#city-11111111-2222-3333-4444-555555555').value = metaData.locality_name; // 3. Replace with your field IDs
          form.querySelector('#state-11111111-2222-3333-4444-555555555').value = metaData.state_territory; // 3. Replace with your field IDs
          form.querySelector('#zip-11111111-2222-3333-4444-555555555').value = metaData.postcode; // 3. Replace with your field IDs
        });
      };

      var e = document.createElement("script");
      e.src = 'https://api.addressfinder.io/assets/v3/widget.js';
      e.async = true;
      e.onload = initAddressFinder;
      form.appendChild(e);
    }
  });

2. Edit the widget code

  1. Replace the region, portalID and formID values for the ones of your HubSpot form.
  2. Replace the ADDRESSFINDER_DEMO_KEY with your licence key. You can get this key from the Addressfinder Portal.
  3. Update the field IDs in the code to match the fields in your form. To find our the IDs of each of your address fields, right click on each one and select Inspect. The element with be highlighted. Copy the ID for each field and paste it into the appropriate place within your generated code. Repeat for each address and metadata field.
  4. (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. Save and test your form

The HubSpot form should be displayed on your test website and the Addressfinder service should activate once you start typing in the street address field.

Alternative options

The above instructions can also be applied when integrating with Addressfinder's email or phone verification widgets. You can also use the address widget to collect verified addresses into a variety of different address field configurations.

To make use of an alternative option, follow the above instructions but substitute the code from one of the examples below in place the code supplied in step 1.3. Note, some examples make use of field types (e.g. input[type=email]) or field names (e.g. input[name=phone]) instead of field IDs.

  • Phone verification widget integration into a HubSpot form: View on CodePen
  • Email verification widget integration into a HubSpot form: View on CodePen
  • Address verification widget integration into a HubSpot form (single address field): View on CodePen
  • Address verification widget integration into a HubSpot form (four address fields): View on CodePen
  • Address verification widget integration into a HubSpot form (five address fields): View on CodePen
  • Address, Email and Phone verification widgets integrated into a HubSpot form: View on CodePen
  • Address with multi-country select: View on CodePen

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.