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.
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.
// 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;
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.
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.
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.
// 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;
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?
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."
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.
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.
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.
