Marketo forms do not provide native prefill functionality when loaded outside of a Marketo landing page. However, we can still implement this using the Marketo APIs and the Forms 2.0 JavaScript API.
The first step is to retrieve the lead data from Marketo via a REST call from your server. Assuming that we do not have an immediate way to crossreference lead IDs or another unique identifier from the server, we’ll need to use the Munchkin cookie, ‘_mkto_trk’, to retrieve data from the Marketo server, using the Get Leads By Filter Type method.
To make this call, we’ll need your Authentication and REST endpoints from your instance. Once you have authenticated with your Marketo instance we’ll need to make a call to the leads API at ‘https://<host>/rest/v1/leads.json’. We then need to create a querystring to filter on the Marketo cookie like this ‘?filterType=cookie&filterValues=’. You’ll need to retrieve the specific value from the ‘_mkto_trk’ key sent to your server by the client.
NOTE: The _mkto_trk cookie value includes an ampersand and needs to be URL encoded to ‘%26’ in order to be properly accepted by the Marketo endpoint.
By default the leads API will return four fields, id, email, firstName, and updatedAt. To set a specific set of fields, you need to include a ‘fields’ query parameter, with field names separated by commas like this: ‘&fields=email,firstName,lastName,company’
Ultimately our call is going to look like this:
|
1 |
https://<host>/rest/v1/leads.json?filterType=cookie&filterValues=<cookie>&fields=email,firstName,lastName,company&access_token=<token> |
When we make this call, it will return a JSON object which looks this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "requestId":"e42b#14272d07d78", "success":true, "result":[ { "id":50, "firstName":"Kenny", "lastName":"Elkington", "email":"mkto@example.com", "company":"Marketo Inc." }] }; |
Now that we have our lead details, we can go about mapping these into a Marketo form, using the whenReady and vals methods in Javascript. First we need to set the Lead results as a variable on our page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> //print your JSON object dynamically as the mktoLead variable var mktoLead = { "requestId":"e42b#14272d07d78", "success":true, "result":[ { "id":50, "firstName":"Kenny", "lastName":"Elkington", "email":"mkto@example.com", "company":"Marketo Inc." }] } </script> |
Now that we have our results on the page, we can map them into our form fields:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> MktoForms2.whenReady( function(form) { //set the first result as local variable var mktoLeadFields = mktoLead.result[0]; //map your results from REST call to the corresponding field name on the form var prefillFields = { "Email" : mktoLeadFields.email, "FirstName" : mktoLeadFields.firstName, "LastName" : mktoLeadFields.lastName, "Company" : mktoLeadFields.company }; //pass our prefillFields objects into the form.vals method to fill our fields form.vals(prefillFields); } ); </script> |