SOLVED

Auto Complete via API

Go to solution
Igor_Tosic
Level 2

Auto Complete via API

I would like to autofill/autocomplete Company field with API. I found on this link useful tips: Reduce Form Abandonment with Google MAP API (I have tried this example and doesn't work for me). It's something that I would reach, but not with Google Map, it's about some else API with companies list. Challenge is that we will have this field on multiple schemes. I have already fetch data with URL query in own custom schema and done autocomplete with bootstrap etc, but we would like to get dynamically in Marketo. Is it webhooks or some JavaScript functionality in Marketo form 2.0? Tips, guidelines!?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Auto Complete via API

This CodePen -- quite ancient at this point, as it was first published in 2015! -- shows how to correctly use the Google Places Autocomplete API with a Marketo form: MktoForms2 :: Google Places Autocomplete 

The same general guidelines can be used with any autocomplete library. Use the Marketo Forms JS API every possible place you can. Do not set DOM values directly, for example, as they do not always correspond to Marketo datatypes, use setValues() instead. Unfortunately, you're unlikely to get away completely from DOM native events because the libraries out there don't have a specific integration with Marketo. So be careful using advanced Marketo features such as Visibility Rules in conjunction with such libraries as one could easily break the other.

View solution in original post

6 REPLIES 6
Amit_Jain
Level 8 - Community Advisor

Re: Auto Complete via API

Hi Igor Tosic

If I'm understanding it correctly, you wnated to autofill the company name on the Marketo form? Is the correct? Can you provide more details on how you wnat it to work? There are differnet techniques that I have seen and I guess the mostly used is that when a person start typing the company name you provide some suggestion in the drop down, is this what you are trying to achieve here?

OR

You have a few records in your database with missing company and you wnate to populate the company fields for these records? Can you be please more specific on the source of the company data?

i should be able to help once I have more details on what you are trying to do here.

Regards,
Amit

Igor_Tosic
Level 2

Re: Auto Complete via API

Hi Amit,

This is exactly the first thing you mentioned. When you start typing the company name to get dropdown with suggestions.

I have used a simple dropdown library in my HTML template. If you need information, I am available.

BR,

Igor

SanfordWhiteman
Level 10 - Community Moderator

Re: Auto Complete via API

This CodePen -- quite ancient at this point, as it was first published in 2015! -- shows how to correctly use the Google Places Autocomplete API with a Marketo form: MktoForms2 :: Google Places Autocomplete 

The same general guidelines can be used with any autocomplete library. Use the Marketo Forms JS API every possible place you can. Do not set DOM values directly, for example, as they do not always correspond to Marketo datatypes, use setValues() instead. Unfortunately, you're unlikely to get away completely from DOM native events because the libraries out there don't have a specific integration with Marketo. So be careful using advanced Marketo features such as Visibility Rules in conjunction with such libraries as one could easily break the other.

Kacper_Gawlik1
Level 2

Re: Auto Complete via API

Hi @SanfordWhiteman

I tried to apply your solution on my test Landing Page and shows error in Company field, would you be able to take a look at this?
http://na-ab29.marketo.com/lp/480-OIY-131/KGTestOnboarding_Test3.html

I generate my own Google API and enabled Google Places library but this is not seems to be the case.
Assuming there must be something with my code as when I replace my form details on your Codepen example it works fine.

Appreciate your help!

 

Thanks,

Kacper

SanfordWhiteman
Level 10 - Community Moderator

Re: Auto Complete via API

You'll see this error in the console:

 


Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-e... Your site URL to be authorized: http://na-ab29.marketo.com/lp/480-OIY-131/KGTestOnboarding_Test3.html

 

Kacper_Gawlik1
Level 2

Re: Auto Complete via API

Thank you @SanfordWhiteman that was it!

Best,
Kacper