I wanted to get some help thinking through a solution for this.
First, the setting:
We have a Marketo form for requesting white papers, etc. It's embedded on our website, and there's a munchkin code on the site. When a user fills out the form, it populates two hidden fields with some URL-passed information we need. Then an automatic email goes to the user, providing a link to the white paper.
If somebody returns to the form for another request, already cookied, they get the form's "custom html for known leads", instead. This html provides a link direct to the white paper. No email is sent.
Challenge:
We want to create an Interesting Moment that passes this info into Salesforce. It seems to work for first time visitors, but we want it to also work when a returning visitor shows up - getting the custom html rather than the form.
I thought I'd read somewhere that when a visitor returns and gets the custom html this should still register as a form fill, but it didn't seem to do so. Is this correct, and what is a good way to capture this moment?
Solved! Go to Solution.
Check out MktoForms2 :: QS-aware KL HTML. Pass your ?title=<title>&type=<type> and the values are populated in the proper spots.
The KL HTML itself is dirt-simple since all the logic is brought out into the whenReady listener:
(The %-variables are not really interpreted, they're just placeholders.)
Note one wheel not worth attempting to reinvent is query string parsing. I've written my own parser in the past but it cannot come near the near-industry-standard URI.js, which is included here.
Hi Charles,
What is the HTML code you have been putting in the custom HTML? You need to have the {{form.button}} token so that it can register the form fillout event.
-Greg
hmmm. I wonder if I've painted myself into a corner?
When a first time uer fills out the form, and request the asset, the submit button doesn't take them directly to it. It redirects them to a confirmation page saying "you'll receive an email with the link".
When someone returns to the the page, it pulls from the passed variables in the url at top to create the link, not a {{form.button}} link. This was so we could use a single form to handle multiple requested file types. Looks like this:
(for reference, click to request a white paper or case study here: live page )
------------------------------------------------------
<div><span style="font-size: 14px;"><span style="color: #666666;">Welcome back, {{lead.FirstName}}!</span> {{form.NotYou:default=Not you?}}</span><br /> <br /></div>
<script>// <![CDATA[
var param1var = getQueryVariable("param1");
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
var param1 = vars[0].substr(vars[0].indexOf("=") + 1);
var param2 = vars[1].substr(vars[1].indexOf("=") + 1);
if (param2=="white_paper") {
param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our white paper. </span><br/><a href=\"http://go.url.com/rs/746-PTV-801/images/"+param1+".pdf\" target=\"_blank\">Download it now</a>";
} else if (param2=="case_study") {
param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our case study. </span><br/><a href=\"http://go.url.com/rs/746-PTV-801/images/"+param1+".pdf\" target=\"_blank\">Download it now</a>";
} else if (param2=="webinar") {
param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our webinar. </span><br/><a href=\"http://go.url.com/"+param1+".html\" target=\"_blank\">View it now</a>";
} else {
param1="There may have been an error in processing your request. Please try again, or contact us for further assistance.";
}
document.getElementById("fillbox1").innerHTML = param1;
document.getElementById("fillbox2").innerHTML = param2;
}
// ]]></script>
<div id="fillbox1" style="font-size: 1.2em; font-weight: bold;"><br /></div>
<div><br /></div>
<div><span style="color: #666666; font-size: 14px;"><a href="mailto:email@url.com">Contact us</a> to learn more about our services.</span><br /></div>
<div><br /></div>
<div><span style="font-size: 14px; color: #666666;">Thank You!<br /> </span></div>
------------------------------------------------------
NOTE: I tried putting {{form.button}} on the page to see what happened, but it just put it there as literal text - "{{form.button}}".
Hi again Charles,
My understanding is that the form.button needs a default="" to display a text, so the form will be {{form.button:default=the text I want}} and it should be in the custom code, together with the {{form.not you}}.
and if you want to pass to Marketo some specific target links, you should rather use a hidden field.
-Greg
Hey Greg, what is {{form.button}}?
{{form.Button}} is a special token that represents the submit button when you're using KL HTML.
Ok... I got the button to work - needed a capital B.
But I fear I'm still a little confused on some of this. On the actual form, I have hidden fields populated by the URL parameters. But how do I do that on this custom html field without a form on it?
You will need to play with some JS code and the forms 2.0 API, I think.
But before this I would run a test, since I am not sure that the form, even not displayed, would not capture the hidden fields.
Sanford Whiteman, Courtney Grimes, ever tried to capture data in hidden fields while running the "known lead" feature ?
-Greg
Hidden fields will not be Autofilled if KL HTML is shown. They can be added using the standard form.addHiddenFields() method.
I might need to get a little help figuring the forms 2.0 api out. I'm looking through it, and trying to drop in code in different places, but nothing seems to work. (referenced : Forms 2.0 » Marketo Developers ) Not sure if maybe this has evolved into something that should be a different conversation string.
I did have to remove my own .js for {{form.submit}} to work on the KL HTML. But when I pasted some code trying to make the form.adHiddenFields() into my KL HTML, it didn't do anything. I also tried putting it on the page under where I've dropped the form embed code in our website. still nothing. I tried with both of these scripts. I suspect there's some basic level thing I'm not understanding about where/how to place these.
--------------------------
<script src="//app-ab14.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1440"></form>
<script>MktoForms2.loadForm("//app-ab14.marketo.com", "746-PTV-801", 1440);</script>
<!-- added below. Also tried replacing with below. and tried on KL HTML section -->
<script>
MktoForms2.loadForm("//app-ab14.marketo.com", "746-PTV-801", 1440, function(form) {
form.setValues({
// Update this with the field/value.
"LastRequestedAssetType": "test3type"
}, function(k, v){var o={};o[k]=v;form.addHiddenFields(o)});
"LastRequestedAsset": "test3title"
}, function(k, v){var o={};o[k]=v;form.addHiddenFields(o)});
});
</script>
--------------------------Above script referenced from http://brightbacon.com/blog/use-marketo-forms-20-api-populate-fields