SOLVED

Fill Marketo Form using Tokens/URL Parameters

Go to solution
Audreon_Babb1
Level 1

Fill Marketo Form using Tokens/URL Parameters

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

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Fill Marketo Form using Tokens/URL Parameters

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

View solution in original post

9 REPLIES 9
SanfordWhiteman
Level 10 - Community Moderator

Re: Fill Marketo Form using Tokens/URL Parameters

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.

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

Audreon_Babb1
Level 1

Re: Fill Marketo Form using Tokens/URL Parameters

Thanks! Should be better now.

SanfordWhiteman
Level 10 - Community Moderator

Re: Fill Marketo Form using Tokens/URL Parameters

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
Level 1

Re: Fill Marketo Form using Tokens/URL Parameters

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>

SanfordWhiteman
Level 10 - Community Moderator

Re: Fill Marketo Form using Tokens/URL Parameters

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

Audreon_Babb1
Level 1

Re: Fill Marketo Form using Tokens/URL Parameters

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

Audreon_Babb1
Level 1

Re: Fill Marketo Form using Tokens/URL Parameters

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
Level 10 - Community Moderator

Re: Fill Marketo Form using Tokens/URL Parameters

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
Level 1

Re: Fill Marketo Form using Tokens/URL Parameters

Awesome, thanks again.