topic Re: Real time street address lookup in form field in CMS Development

Real time street address lookup in form field

chrispower — Thu, 29 Nov 2018 20:01:59 GMT

I am creating a simple registration form containing email, first name, last name, phone number, and street address fields. For the street address, I would like to add real time autocomplete/lookup functionality, using the smartystreets API documented here: https://smartystreets.com/docs/plugins/website.

I'm new to hubspot development, and not really sure where to start with this, or how it would be structured.

Re: Real time street address lookup in form field

joneichler — Tue, 04 Dec 2018 21:48:02 GMT

Unfortunately I'm not familiar with smarty streets, but if your not married to that option, you could use the google maps autocomplete api.

This is a pretty good tutorial on it : https://www.w3docs.com/learn-javascript/places-autocomplete.html

You would just need to set the script to target the ID of the hubspot form field.

Re: Real time street address lookup in form field

chrispower — Wed, 05 Dec 2018 16:27:24 GMT

I am actually already familiar with smartystreets and have implemented it elsewhere in standalone websites. The part I'm not clear on is how I would integrate it with a hubspot form.

"You would just need to set the script to target the ID of the hubspot form field."

Can you elaborate on that please?

Thanks

Chris

Re: Real time street address lookup in form field

joneichler — Wed, 05 Dec 2018 16:31:42 GMT

With the google solution you just target a specific Form field (using standard css targeting) to be your main address field and then you also set which fields it will poplulate once the user selects the address.

Sorry I can't be of more assistance.

Re: Real time street address lookup in form field

alanbrown — Mon, 28 Oct 2019 20:53:38 GMT

@joneichler

This sounds like a great solution I think a lot of people would utilize. Would you mind sharing a bit more about how you accomplished this?

The link you shared doesn;t contain any info about filling the remaining address fields with the info retrieved from the Places API. Would you mind sharing your implementation? Even a brief example of some working code would go a long way.

Re: Real time street address lookup in form field

SabeFlex — Thu, 13 Feb 2020 21:41:41 GMT

Did you ever receive any additional instructions?

Re: Real time street address lookup in form field

jkeough78 — Tue, 15 Sep 2020 14:50:01 GMT

Hi @chrispower and @joneichler and @SabeFlex ,

Please upvote this idea here so HubSpot will do this for us 🙂

https://community.hubspot.com/t5/HubSpot-Ideas/Autocomplete-adress-form-fields-with-Google-maps/idi-p/247511

Re: Real time street address lookup in form field

BrandonCarn — Thu, 13 May 2021 03:35:21 GMT

Wondering if anyone ever got SmartyStreets intergrated with HubSpot.

Re: Real time street address lookup in form field

Mireille — Fri, 15 Oct 2021 12:21:49 GMT

Hi, you can add Loqate's address autocomplete on HubSpot forms, and here's a handy guide to show you how to: https://www.loqate.com/resources/support/setup-guides/hubspot/

Re: Real time street address lookup in form field

tsprunk — Fri, 24 Mar 2023 21:40:01 GMT

I know this is an old thread but I stumbled across it when I was trying to figure this out so I figured I'd share my solution:

This can be done with Google Maps API. I'll do my best to explain it below, but you can also hire my agency to do it for you if you'd rather not bother with it (SimpleStrat.com).

To do this, you'll need to add the javascript below to the page where your form will appear. There's also a way to add it to the form embed code directly but I won't get into that here. There are a couple things you'll likely need to edit depending on your form and the fields you want filled in.

This code is currently set up to work for US and Canada is based on the code found on this page: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

// Create the script tag, set the appropriate attributes, be sure to replace "YOURAPIKEY" in the script source url with your Google Maps API Key var script = document.createElement('script'); script.src='https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places&callback=initAutocomplete'; script.async = true; // Append the 'script' element to 'head' after the page loads window.addEventListener('load', function(){document.head.appendChild(script);}) let autocomplete; let address1Field; let address2Field; let postalField; function initAutocomplete() { //change .hs-address below to the class for your 1st line //address input field if necessary address1Field = document.querySelector(".hs-address .hs-input"); //change .hs-zip below to the class for your postal code input field if necessary postalField = document.querySelector(".hs-zip .hs-input"); // Create the autocomplete object, restricting the search predictions to // addresses in the US and Canada. autocomplete = new google.maps.places.Autocomplete(address1Field, { componentRestrictions: { country: ["us", "ca"] }, fields: ["address_components", "geometry"], types: ["address"], }); // When the user selects an address from the drop-down, populate the address fields in the form. autocomplete.addListener("place_changed", fillInAddress); } function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @TS-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": //change .hs-city below to the class for your city input field if necessary //comment out or delete the line below if no city field in your form document.querySelector(".hs-city .hs-input").value = component.long_name; break; case "administrative_area_level_1": { //change .hs-state below to the class for your city input field if necessary //comment out or delete the line below if no state field in your form document.querySelector(".hs-state .hs-input").value = component.short_name; break; } case "country": //change .hs-country below to the class for your city input field if necessary //comment out or delete the line below if no country field in your form document.querySelector(".hs-country .hs-input").value = component.long_name; break; } } address1Field.value = address1; //comment out or delete the line below if no postal code field in form postalField.value = postcode; } window.initAutocomplete = initAutocomplete;

Re: Real time street address lookup in form field

apmul — Wed, 18 Oct 2023 22:14:26 GMT

Hi! Wondering if you have a live form running off of this? I've got a version running using places now but there are a few quirks I'd like to iron out; would love to see if yours runs more smoothly?

Re: Real time street address lookup in form field

atownsend1 — Tue, 25 Feb 2025 16:16:33 GMT

Yes! This is very possible with Smarty (formerly SmartyStreets) in Hubspot. You'll create a custom HTML form that communicates to Hubspot through the form API.

It sounds complicated, and it kind of is, but not really.

Smarty released a tutorial on it last year: https://www.smarty.com/articles/hubspot-address-autocomplete-guide

Basically, you create an HTML form, link it to the Hubspot form API, and then connect it to Smarty's autocomplete functionality. Pretty simple.

Here's basic code for an HTML form that is prepared for autocomplete:

<form id="myCoolForm" style="padding: 30px; border: 1px solid #476884; border-radius: 16px;"><input id="myCoolFirstname" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" type="text" placeholder="First name *"> <input id="myCoolLastname" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" type="text" placeholder="Last name *"> <input id="myCoolEmail" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" required="" type="text" placeholder="Email *"> <input id="myCoolAddress" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" type="text" placeholder="Address *"> <input id="myCoolCity" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" type="text" placeholder="City *"><select id="myCoolState" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;"> <option value="AL">AL</option> <option value="AK">AK</option> <option value="AZ">AZ</option> <option value="AR">AR</option> <option value="CA">CA</option> <option value="CO">CO</option> <option value="CT">CT</option> <option value="DE">DE</option> <option value="FL">FL</option> <option value="GA">GA</option> <option value="HI">HI</option> <option value="ID">ID</option> <option value="IL">IL</option> <option value="IN">IN</option> <option value="IA">IA</option> <option value="KS">KS</option> <option value="KY">KY</option> <option value="LA">LA</option> <option value="ME">ME</option> <option value="MD">MD</option> <option value="MA">MA</option> <option value="MI">MI</option> <option value="MN">MN</option> <option value="MS">MS</option> <option value="MO">MO</option> <option value="MT">MT</option> <option value="NE">NE</option> <option value="NV">NV</option> <option value="NH">NH</option> <option value="NJ">NJ</option> <option value="NM">NM</option> <option value="NY">NY</option> <option value="NC">NC</option> <option value="ND">ND</option> <option value="OH">OH</option> <option value="OK">OK</option> <option value="OR">OR</option> <option value="PA">PA</option> <option value="RI">RI</option> <option value="SC">SC</option> <option value="SD">SD</option> <option value="TN">TN</option> <option value="TX">TX</option> <option value="UT">UT</option> <option value="VT">VT</option> <option value="VA">VA</option> <option value="WA">WA</option> <option value="WV">WV</option> <option value="WI">WI</option> <option value="WY">WY</option> </select><input id="myCoolZip" style="padding: 15px; margin: 6px; border: 2px solid #eee; border-radius: 2px;" type="text" placeholder="ZIP Code"> <div style="padding-bottom: 15px; padding-left: 15px;">Your <a href="https://YOUR PRIVACY POLICY LINK GOES HERE">privacy</a> is important to us. You agree to receive messages regarding our products and services by submitting this form. You may unsubscribe at any time.</div> <div style="text-align: center;"><button id="myCoolButton" style="background-color: #0066ff; color: white; padding: 15px 40px; font-size: 20px; font-weight: bold; border: none; border-radius: 90px; cursor: pointer; display: inline-block; text-align: center; text-decoration: none;">SUBMIT</button></div> </form>

And then whatever page you're putting it on just needs to have this JavaScript in the footer.

I got it working really fast, in like ten minutes.

Re: Real time street address lookup in form field

atownsend1 — Tue, 25 Feb 2025 16:20:24 GMT

I did, and it works great. They have a handy guide to show you how: https://www.smarty.com/articles/hubspot-address-autocomplete-guide

Re: Real time street address lookup in form field

atownsend1 — Tue, 25 Feb 2025 16:22:25 GMT

Smarty (formerly SmartyStreets) recently released a tutorial on how to get autocomplete working in Hubspot, and the principles outlined in their tutorial answer the question above.

https://www.smarty.com/articles/hubspot-address-autocomplete-guide

Re: Real time street address lookup in form field

atownsend1 — Tue, 25 Feb 2025 18:40:02 GMT

I think this would solve your problem: https://www.smarty.com/articles/hubspot-address-autocomplete-guide