Associate Leads from external site to Marketo Landing Page

[Cory_Colt]

We created a "manage subscription" form and created a marketo landing page for it. The form is set to prefill the form fields. We're having an issue getting the form to populate with the user's information. 

Currently we have a website separate from Marketo, but we're trying to integrate our website with some Marketo functionality. We're trying to provide a user with a link "Manage Subscriptions and Preferences" which takes them to a marketo landing page we created with the custom form referenced above.

How do we accomplish this functionality to allow the user to click on the link, but then be taken to a marketo landing page with the form populated already with the user's information? 

What I've done: 

I'm using the Associate Lead REST API functionality to associate the lead, so I'm sending a POST request with the user's marketo ID and munchkin cookie information. I'm getting back a status code of 200 (OK), but the form still isn't populating. 

This seems like such common functionality that I'm a little confused as to why it's not called out in the documentation. I've spent HOURS and HOURS at this point going through the documentation, but I'm at a loss on this one. Any help would be greatly appreciated.

[SanfordWhiteman]

Munchkin session association doesn't mean native form Pre-Fill works. (It never meant that on external sites, though it's quite recently that it stopped meaning it on Marketo LPs as well.)

Native Pre-Fill only works in response to clicks on Marketo-tracked email links.

To extend Pre-Fill, use my JS library: https://nation.marketo.com/groups/newyork-user-group/blog/2018/05/04/form-pre-fill-external-sites-no... 

[Jay_Jiang]

Can your application just append the user's data as a query string to the email preference centre url?

An alternative to Sandford's script, and if you're associate api call is working, take a look at https://nation.marketo.com/thread/50485-pre-fill-workaround if you decide to keep your preference centre as a marketo landing page

[Cory_Colt]

Jay, this is actually what I was hoping I could do is pass the marketo user id or some other data as a query string over to the landing page and have it populate the form based on looking up the user's data with the data I'm sending it. However, I can't find any documentation on this type of functionality. Instead, it seems like you're supposed to associate the lead (which I am currently doing), but it still doesn't populate the form. According to Sanford, this functionality isn't readily available out of the box.

Do you know of a way to just send some user data along with the query string to have the landing page pre-fill the form based on what's in the query string? 

[SanfordWhiteman]

It's not that you can't pass values in the query string. It's that AutoFill (not Pre-Fill, which is different, as described above) from URL params only natively works for hidden fields.

If you search, I've posted several examples of how to roll your own AutoFill for visible fields using a URI library, URI.js or my FormsPlus library (which includes URI.js). Such as here: MktoForms2 :: KV HTML w/Auto-Fill and Cascade v1.1.0  

[Jay_Jiang]

Just answering your exact question....

As long as you've got the user's details readily available for the browser to access, with some javascript on your site and on the email preferences page:

1. Give all your links to the email preferences page it's own class

2. Set your field values for email, firstName, lastName (or whatever else)

3. using jQuery on your site: 

$('a.linkClass').click(function(e){ 
  e.preventDefault(); 
  window.top.location = $(this).attr('href') + "?email="+email+"&firstName="+firstName+"&lastName="+lastName;
})‍;‍‍‍‍‍‍‍‍

4. Then on your email preference page, 

var url = new URL(window.location.href);
MktoForms2.whenReady(function (form) {
  form.vals({ 
    "Email":url.searchParams.get("email"),
    "FirstName":url.searchParams.get("firstName"),
    "LastName":url.searchParams.get("lastName")
  });
});‍‍‍‍‍‍‍‍

[SanfordWhiteman]

No URL on IE. That's why a library is always necessary.

[Cory_Colt]

Sanford Whiteman‌ what do you mean? You can't use query strings for this on IE?

[Jay_Jiang]

new URL() and it's methods aren't supported by IE. You need to deploy some other javascript e.g. from css-tricks.com

function getQueryVariable(variable){
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}
MktoForms2.whenReady(function (form) {
  form.vals({ 
    "Email":getQueryVariable("email"),
    "FirstName":getQueryVariable("firstName"),
    "LastName":getQueryVariable("lastName")
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SanfordWhiteman]

what do you mean? You can't use query strings for this on IE?

No, I mean that Jay's 2nd piece of code -- the code for the second page -- is not compatible with IE.

So, though it's compellingly simple, it's not a real-world solution unless your corporate standard says IE doesn't matter (which I doubt it does).

You can use Jay's code for the first page, and my code (from the JS pane in the linked CodePen) for the second page. My JS is built to work in IE 10+.

There's no reason to skimp on functionality here, and if you download the FormsPlus JS and add it to Design Studio, then include it in your page and add the CodePen JS, you have a robust solution for filling fields (visible or hidden, doesn't matter) from query params, cookies, or static values.

EDIT: Jay later added IE-compatible code that doesn't rely on the URL object.