Jay Jiang

Pre-fill workaround

Discussion created by Jay Jiang on May 20, 2019
Latest reply on Jul 21, 2019 by Jay Jiang

There's nothing worse than going on leave and coming back to find something broken. Such was the reality for our email preference centre. If you've been affected by the pre-fill fiasco (https://nation.marketo.com/docs/DOC-6909-form-pre-fill-feature-upgrade), the most likely place impacted would be your email preference centre. What I found was that forms were submitting and saving unsubscribes (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 init_fields = {
"Email":"{{lead.Email Address}}",
"emailPreferencesPause":"{{lead.Email Preferences - Pause}}",
"emailPreferencesPauseUTCTimestamp":"{{lead.Email Preferences - Pause UTC Timestamp}}"
},
init_checkboxes = {
"Unsubscribed":"{{lead.Unsubscribed}}",
"listEvents":"{{lead.List - Events}}",
"listNewsletters":"{{lead.List - Newsletters}}",
"listProductUpdates":"{{lead.List - Product Updates}}",
"listVocusBusinessUpdates":"{{lead.List - Vocus Business Updates}}"
};
MktoForms2.$.each(init_checkboxes,function(key,val){
if(val){init_fields[key]="yes"}
});
form.vals(init_fields);
});

 

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.

Outcomes