Smart Address Autocomplete in HubSpot Forms Using Google Places API

Collecting accurate address information from leads is critical for many businesses — from territory assignment to geo-targeted campaigns. But HubSpot’s native forms don’t support smart address autocomplete, and embedded forms are often restricted due to HubSpot tracking or styling requirements.

This guide shows you how to use Google Places API inside a HubSpot custom module to:

1. Autocomplete full address fields from a single input.
   
2. Autocomplete specific fields like state and country even when the full address isn’t provided.
   
3. Seamlessly use this inside a HubSpot form without relying on embedded forms.
   

Why Not Use Embedded Forms?

While embedding third-party forms is a common workaround, it's not ideal in HubSpot because:

• Embedded forms don't support native tracking (UTM parameters, cookies, session IDs).
  
• They break workflows and don’t trigger native form submissions.
  
• Styling and validation can become inconsistent with your theme.
  

So instead, we build a custom module that injects smart logic into native HubSpot form fields — keeping everything trackable, on-brand, and workflow-friendly.

What You'll Need

• Google Places APIA: utocomplete addresses + geodata
• HubSpot Custom Module: Inject custom JS/CSS/markup into your theme
• HubSpot Form: Standard form with contact properties
• JavaScript: Custom logic to wire everything up

Part 1: Set Up Your Google Places API

1. Go to Google Cloud Console.
2. Create a project and enable:
   • Places API
   • Maps JavaScript API (required for autocomplete UI)

1. Go to Credentials → Create API Key.
2. Restrict the key to your domain (e.g., *.yourdomain.com) and only allow Places and Maps JS APIs.

Part 2: Create the HubSpot Custom Module

In your design manager, create a custom module with the following:

Fields

• Address (text input bound to HubSpot's address property)
• City, State, Postal Code, Country — each as separate form fields tied to contact properties.
• Optionally: a toggle field to enable "only country/state autocomplete"

JS + HTML Markup

Use raw HTML fields to output native HubSpot inputs and place a script block:

<input type="text" id="autocomplete" name="address" placeholder="Start typing address..." />

<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
<input type="text" id="zip" name="zip" />
<input type="text" id="country" name="country" />

<script>
  let autocomplete;

  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("autocomplete"),
      { types: ["geocode"] }
    );

    autocomplete.addListener("place_changed", () => {
      const place = autocomplete.getPlace();
      if (!place.address_components) return;

      const components = place.address_components;

      const getComponent = (type) =>
        components.find(c => c.types.includes(type))?.long_name || "";

      document.getElementById("city").value = getComponent("locality");
      document.getElementById("state").value = getComponent("administrative_area_level_1");
      document.getElementById("zip").value = getComponent("postal_code");
      document.getElementById("country").value = getComponent("country");
    });
  }

  document.addEventListener("DOMContentLoaded", () => {
    const script = document.createElement("script");
    script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete";
    script.defer = true;
    document.head.appendChild(script);
  });
</script>

function initPartialAutocomplete() {
  const countryInput = document.getElementById("country");
  const countryAutocomplete = new google.maps.places.Autocomplete(countryInput, {
    types: ["(regions)"]
  });

  countryAutocomplete.addListener("place_changed", () => {
    const place = countryAutocomplete.getPlace();
    countryInput.value = place.name;
  });
}

Return to blog