Fill Marketo Form using Tokens/URL Parameters

[Audreon_Babb1]

Hello,

We are trying to ensure a form is filled with the Marketo tokens rather than Pre-fill data when someone clicks on the landing page link in an email. I've read a few posts about this but can't seem to get the hidden fields and JS code to work.

The first field in my form is mapped to Email Address and I want it to populate the email in Marketo database (some visitors are seeing pre-fill info that doesn't match their Marketo email address).

I've created a hidden email field named renewEmailAddress and set the autofill to URL paramater: email. Would my JS code then look like the below? And would the link in the email would then look like https://example.com?email={{Lead.Email Address}}? I don't think I'm putting the JS code in the right location and/or I'm using the wrong "source" and taget names in the code itself.

// Set your proxy (hidden) field to visible field mappings
var proxySources = [
{
source : "renewEmailAddress",
target : "Email Address",
readOnly : false
}
];
// --- No need to touch below this line! ---
var formEl = form.getFormElem()[0],
readyValues = form.getValues(),
mktoFieldsObj = {},
arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice);
proxySources
.filter(function(proxy){
return !!readyValues[proxy.source];
})
.forEach(function(proxy){
var fieldEls;
mktoFieldsObj[proxy.target] = readyValues[proxy.source];
if (proxy.readOnly) {
fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]');
arrayFrom(fieldEls)
.forEach(function(el){
el.readOnly = el.disabled = true;
});
}
});
form.setValues(mktoFieldsObj);
@@@});

Message was edited by: Audreon Babb

[SanfordWhiteman]

Please go back and highlight your code using the Advanced Editor's syntax highlighter so it's readable. I can't do anything with that as it stands.

[Audreon_Babb1]

Thanks! Should be better now.

[SanfordWhiteman]

No way is that compiling with the extra @ @ @ in there. That's a syntax error.

Once you fix the syntax error(s) the main problem is that you want

target: "Email"

not

target: "Email Address"

[Audreon_Babb1]

Thanks, I updated the code to the below and placed it in an html block on the landing page where the form is hosted, but I'm not seeing email address populate. renewemailaddress is a custom field I made in Marketo. Maybe I have that name wrong?

<script>
MktoForms2.whenReady(function(form){ 
  // Set your proxy (hidden) field to visible field mappings 
  var proxySources = [ 
      { 
        source : "renewemailaddress", 
        target : "Email", 
        readOnly : false 
      } 
  ]; 
  // --- No need to touch below this line! --- 
  var formEl = form.getFormElem()[0], 
      readyValues = form.getValues(), 
      mktoFieldsObj = {}, 
      arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice); 
  proxySources 
  .filter(function(proxy){ 
      return !!readyValues[proxy.source]; 
  }) 
  .forEach(function(proxy){ 
      var fieldEls; 
      mktoFieldsObj[proxy.target] = readyValues[proxy.source]; 
      if (proxy.readOnly) { 
        fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]'); 
        arrayFrom(fieldEls) 
        .forEach(function(el){ 
            el.readOnly = el.disabled = true; 
        }); 
      } 
  }); 
  form.setValues(mktoFieldsObj); 
}); 
</script>

target: "Email Address"

[SanfordWhiteman · Accepted solution]

Field names are case-sensitive. Are you sure that's the SOAP/form field name?

[Audreon_Babb1]

That was definitely it; should have been renewEmailAddress. I appreciate the help!!

[Audreon_Babb1]

As a follow up, can this be done with multiple fields in the same JS code? Trying to do this for multiple fields but I'm not sure of the correct syntax.

Below is what I've tried.

<script> 
MktoForms2.whenReady(function(form){ 
  // Set your proxy (hidden) field to visible field mappings  
  var proxySources = [ 
      { 
        source : "renewEmailAddress", 
        target : "Email", 
        readOnly : false 
      } 
{ 
        source : "renewAccountNumber", 
        target : "acc", 
        readOnly : false 
      } 
  ]; 
  // --- No need to touch below this line! ---  
  var formEl = form.getFormElem()[0], 
      readyValues = form.getValues(), 
      mktoFieldsObj = {}, 
      arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice); 
  proxySources 
  .filter(function(proxy){ 
      return !!readyValues[proxy.source]; 
  }) 
  .forEach(function(proxy){ 
      var fieldEls; 
      mktoFieldsObj[proxy.target] = readyValues[proxy.source]; 
      if (proxy.readOnly) { 
        fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]'); 
        arrayFrom(fieldEls) 
        .forEach(function(el){ 
            el.readOnly = el.disabled = true; 
        }); 
      } 
  }); 
  form.setValues(mktoFieldsObj); 
}); 
</script> 

[SanfordWhiteman]

You absolutely can use an array of objects: in fact, you already are using an array in the first example, it simply happens to have only a single object in it.

You left out a comma between the 2 objects, however.

var proxySources = [
  {
    source : "renewEmailAddress",
    target : "Email",
    readOnly : false
  },
  {
    source : "renewAccountNumber",
    target : "acc",
    readOnly : false
  }
];   

[Audreon_Babb1]

Awesome, thanks again.