Addressfinder integration instructions for external Hubspot forms

What is the Addressfinder embed for external Hubspot forms?

Installation Instructions

• These instructions will show you how to add the Addressfinder autocomplete to an externally hosted 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 externally hostes HubSpot form, you’ll need to have the following:
• 1. An existing Hubspot form, embedded on a web page.
• 2. The form should already have the following address elements:
1. Street
2. Suburb
3. City
4. State
5. Postcode
6. 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 menu, navigate to Marketing > Lead Capture > Forms
• 3. Hover over a form and click Actions > Share. Alternatively, open the form and click Embed
• 4. Paste the embed code into the HTML module on your external page
• For more information, see the Hubspot instructions

Taking note of the form field property names

• 1. Click on the correct form in Marketing > Lead Capture > Forms
• 2. Click on Edit Form, to see a pannel 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
City	city
State	state
Post code	zip
Country (optional)	country

Preparing the code

• 1. The HubSpot external embed instruction will lead you to include a Hubspot Javascript snippet in your page.
• 2. You will need to add the Addressfinder widget configuration to this code.
• 3. Paste the following Addressfinder config into your hubspot form embed javascript (keeping your own values for the region, portalId and formId).

  <script>
  hbspt.forms.create({
    region: "na1",
    portalId: "00000000",
    formId: "11111111-2222-3333-4444-555555555",
    onFormReady: function(form) {
      // **************************************************
      // Addressfinder plugin for Hubspot
      // **************************************************

      // STEP BY STEP integration instructions here:
      // https://addressfinder.com/r/docs/plugins/hubspot-external-embed/

      var config = {
        // STEP 1: paste in your licence key
        licenceKey: "ADDRESSFINDER_DEMO_KEY",

        defaultCountryCode: "AU",

        // STEP 2 - update the property names using the values assigned within your Hubspot form
        searchPropertyName: "address", // can be a separate field
        addressPropertyName: "address",
        suburbPropertyName: null,
        cityPropertyName: "city",
        statePropertyName: "state", // region (optional)
        postCodePropertyName: "zip",
        countryPropertyName: null, // 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.com/r/docs/widget_code_generator/
        widgetOptions: {
          AU: {
            address_params: {
              paf: 1
            }
          },
          NZ: {
            address_params: {}
          },
          INT: {
            address_params: {}
          }
        },

        // STEP 4: once the plugin is working, you can set debugMode to false
        debugMode: true
      };

      if(form.querySelector(`input[name=${config.searchPropertyName}]`)){var e=document.createElement("script");e.src="https://api.addressfinder.io/assets/hubspot/v2/address.js",e.async=!0,e.autoLoadConfig=config,form.appendChild(e)}
    }
  });
</script>

Copy source codecontent_copy Copiedcheck
• 4. At the top of this code, replace the ADDRESSFINDER_DEMO_KEY with your licence key. You can get this key from the Addressfinder Portal after you’ve signed up.
• 5. Next, update the property names using the table you created (above).
• 6. If your property name contains any special characters (such as a slash), you need to wrap the value in single quotation marks. For example, addressPropertyName: "'2-577445/street_address'".
• 7. (optional) You may tweak the address_params values. Use the output from the code generator to tune your addresses for allowed addresses such as PO Boxes, etc.
• 8. That’s all

Publish and test

• 1. Wait 30 seconds, reload your page (where the form embed code has been added).
• 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.com.au, and we will have a look. Be sure to include the URL of the page, so we can debug the problem.

Advanced options