Re: Prefill by user submitted ID

Anonymous
Not applicable

Maybe I missed this somewhere but I want a user to be able to enter their lead ID (it will be mailed to them as an 'activation code') and then when they submit I'll have that inserted into the API and prefill the form with their lead data. Does Marketo have that prebuilt into it somewhere?

Basically they receive a direct mail piece with this activation code (their lead ID) and a landing page URL. They go to the page and its basically just a form with a text input and submit button, they enter their code/lead ID and hit enter. Then I have it grab the lead ID that is entered and it directs them to a multi step form and uses the API to prefill all the lead data we have for them, they fill out the rest and submit. If they come back and enter the code/ID again it prefills with all the previously submitted info (presumably by including all the fields in the query, so if we have it it prefills, if we don't its blank).

17 REPLIES 17
Robb_Barrett
Level 10

Someone fancy with JS and JQ wrote that. Sanford Whiteman​ can verify whether that'll work or not, but the traditional way that's in the online examples is to do it this way:

MktoForms2.loadForm("//app-XXXX.marketo.com", "123-XXX_456", {{my.Form ID}},

      function(form) {

      form.vals({"Phone":"{{lead.Phone Number}}",

                 "FirstName":"{{lead.First Name}}",

                 "LastName":"{{lead.Last Name}}",

                 "Company":"{{company.Company Name}}",

                 "Email":"{{lead.Email Address}}"

                });

Robb Barrett
SanfordWhiteman
Level 10 - Community Moderator

That won't work on an external page. What Nick's doing is gathering the fields from tokens (not prefilled fields per se, but effectively the same) and encoding them to be passed to an external destination.

Robb_Barrett
Level 10

I thought that too but I'm moving past that point since he's showing code above that's having a discrepancy. It seems like it's able to pick up the name attributes so my assumption is we're no longer external.

Robb Barrett
SanfordWhiteman
Level 10 - Community Moderator

The page that reads the tokens is a Marketo pURL-enabled LP.

The page with the form is a non-Marketo page.

Robb_Barrett
Level 10

Best way I've found to pre-fill embedded forms on external pages is to iFrame in a Marketo page with the form, or take them to a Marketo page with the form which then forwards them to your external page.

You can also look at passing the email address in a parameter which is then picked up by a hidden field. Some people are against this for security reasons but if you're passing a lead ID you've already created a big enough security hazard and email is probably a little less dangerous.

Robb Barrett
SanfordWhiteman
Level 10 - Community Moderator

You want the pURL feature. This is designed for direct mail -- check docs and Community.

There's no need to use any API here (and I'd never expose API calls via a public interface).

Anonymous
Not applicable

This is going to be an embedded form on an external page

SanfordWhiteman
Level 10 - Community Moderator

There's no way to do this reliably solely with an external page.

You can send them to a pURL first, then redirect them to your external page w/their lead data passed in the query string or hash.

Anonymous
Not applicable

So how would we get them to enter their code (lead ID) to prefill the form. We don't want to send each individual their own pURL

SanfordWhiteman
Level 10 - Community Moderator

Send them to a page with a simple form (which you'd have to do in all cases, if you want to concatenate two different pieces you're sending them).

They enter their code and the form posts to the pURL (example.com/purlifiedpage/XYZ123)

The pURL redirects to your site with their info.

Anonymous
Not applicable

Okay so I have a marketo landing page with this script (user submits their marketo unique code and it appends it to the marketo landing page url to get their data)....

<script>

  var destinationRoot = "https://mydomain.com/form-page"; 

  var mktoFields = { 

  "FirstName"      : "{{lead.First Name}}", 

  "LastName"       : "{{lead.Last Name}}",

  "Phone"          : "{{lead.Phone Number}}",

  "Email"          : "{{lead.Email Address}}"

}; 

document.location.href = destinationRoot + '#' + btoa(JSON.stringify(mktoFields)); 

</script>

and then the form page renders the form and has the following....

<script>

MktoForms2.loadForm("//app-XXXX.marketo.com", "XXX-XXX-XXX", XXXX);

MktoForms2.whenReady( function(form) {

var mktoFields = JSON.parse(atob(document.location.hash.substring(1))); 

  form.setValues(mktoFields);

}

);

</script>

But when it redirects back to my form page its only prefilling first and last name. All the following fields remain empty and I don't know why it's breaking after the last name. Is anything obvious to you about what's incorrect?

SanfordWhiteman
Level 10 - Community Moderator

Let's break it down further. What ends up in the JSON object on the pURL-enabled page, before any forwarding or encoding? That has to look as expected for the next step to work.

Anonymous
Not applicable

It seems to be working now....there were no code changes made per se. I just restarted with a new blank template - so not sure what was causing that but as of now it's back working the way it should. Thanks!

Anonymous
Not applicable

When i replace the redirect/encoding with a console.log it shows the JSONobject has the data

Screen Shot 2017-11-01 at 1.50.50 PM.png

SanfordWhiteman
Level 10 - Community Moderator

OK, so far so good. Now check the JS object on the destination page, after it's decoded and parsed.

Anonymous
Not applicable

Okay last question - I know I can validate forms on submission but is there a way to do it in reverse?

Example case:

Page 1 = Initial landing page with form to enter their Marketo unique code

Page 2 = follow up page with Marketo form that will be "prefilled" after the Marketo pURL enabled page passes the data to it

User on page 1 enters invalid code (whether a typo or just trying to mess around), user should be shown an invalid code message.

I'd just check if the field is empty but there is a button on page 1 that allows the user to proceed if they don't have a code (i.e. end up on the page by accident or don't have their code in front of them and just want to submit info). So I'd have to validate the entered code on submission or on the Marketo pURL page and pass back some type of hiddenfield value so I could check that to display an invalid code message.

SanfordWhiteman
Level 10 - Community Moderator

If someone ends up on a pURL-enabled page but they enter an invalid pURL, then they'll get the default field values (which will be empty)... not sure why checking that doesn't suffice? I would assume the "Forgot your code?" link would go straight to the non-pURL, non-Marketo page.