Real time street address lookup in form field

Occasional Contributor

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.

Reply
0 Upvotes
5 Replies 5
Highlighted
Occasional Contributor | Platinum Partner

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.

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi

 

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

Reply
0 Upvotes
Highlighted
Occasional Contributor | Platinum Partner

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.

Reply
0 Upvotes
Highlighted
Occasional Contributor

@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.

Highlighted
New Contributor

Did you ever receive any additional instructions?

Reply
0 Upvotes