Going on leave and coming back to find something broken can pretty quickly spoil all of the good vibes you saved up from the holiday. So when I found our email preference centre broken because of the pre-fill fiasco (https://nation.marketo.com/docs/DOC-6909-form-pre-fill-feature-upgrade), it put me in a bad mood, pretty quickly. Luckily, I found that forms were submitting and unsubscribes were being saved (phew!), but the user experience was broken.
So if you were in the same situation as me, here's a workaround to get pre-fill working again so you don't have to compromise on user experience.
If you've been reading discussions in the general community, you'll probably have read that the solution is to use Sanford Whiteman's javascript plugin, which requires installation and a learning curve to use. There is a another way, which is to use the Marketo forms javascript API combined with tokens of the fields that you need pre-filled in your form. You will have to list every field by it's field ID that needs pre-filling per form, and repeat the code for each form on a landing page (with some customisation to the code below) if there are multiple forms. So deploying the workaround is easier if you've to set up global forms and a master landing page template.
Here's the code example:
MktoForms2.whenReady(function (form) {
var prefillFields = {
"Email":"{{lead.Email Address}}",
"emailPreferencesPause":"{{lead.Email Preferences - Pause}}",
"emailPreferencesPauseUTCTimestamp":"{{lead.Email Preferences - Pause UTC Timestamp}}"
},
prefillCheckboxes = {
"Unsubscribed":"{{lead.Unsubscribed}}",
"listEvents":"{{lead.List - Events}}",
"listNewsletters":"{{lead.List - Newsletters}}",
"listProductUpdates":"{{lead.List - Product Updates}}",
"listVocusBusinessUpdates":"{{lead.List - Vocus Business Updates}}"
},
initFields = {},
text = "<prefillFields>";
MktoForms2.$.each(prefillFields,function(key,val){
if(val.length){text += "<"+key+">"+val+"</"+key+">";}
});
text += "</prefillFields>";
var parser = new DOMParser(),
xmlDoc = parser.parseFromString(text,"text/xml"),
xmlNodes = xmlDoc.documentElement.childNodes;
for (i = 0; i < xmlNodes.length; i++) {
initFields[xmlNodes[i].nodeName] = xmlNodes[i].childNodes[0].nodeValue;
}
MktoForms2.$.each(prefillCheckboxes,function(key,val){
if(val){initFields[key]="yes"}
});
form.vals(initFields);
});
Explanation:
When a landing page is "generated" by Marketo, tokens in the HTML is replaced with data from the backend (which is the whole point of personalisation). We're using the Marketo forms javascript to set the field values as soon as the form is loaded with the tokens of the same fields as the form.
One thing to note is, fields have to be split between checkboxes and every other type of field. The reason is that Marketo saves and reads checkbox data as 1, but the Marketo forms javascript only understands "yes" or "no".
You will need to customise the code if you have more than 1 form on a page.
Lastly, keen to hear of any ideas of how other people have navigated around the pre-fill issue.