Hi. We would like to be able to put a Yes/No next to each preference center option when it is presented in the Confirmation landing page. I've tried the script below without success. Anyone have any suggestions? Thanks in advance.
#if (${lead.pCMarketingCommunications} == 1 )
#set ($pcMarketingCommunications = "Yes,")
#if (${lead.pCMarketingCommunications} == 0 )
#set ($pcMarketingCommunications = "No,")
#END
Sarah, you can't use VTL (Velocity Template Languagee) on LPs. Velocity is for email personalization. On LPs, you use JavaScript. But it's not clear why you'd need any kind of scripting for this, since Marketo forms natively handle booleans.
The native boolean capability is working great. But for the confirmation landing page, I was hoping to put something more friendly than the 1 or 0 you get if you just use the token. Below is the mock up (please pardon the ugliness its a non styled test). Going to look into using javascript. Thanks!
Yes, that use case requires javascript/jquery to convert that to a human language.
To do that simple display manipulation you can use CSS only.
Output the tokens into an HTML data-attribute, like <span data-checkbox-value="{{Lead.Marketing Communications}}"></span>.
Then go like this: http://codepen.io/figureone/pen/e025a2ebfe19e8400deccdf03ababa14/
Sanford, what/how do you "Output the tokens into an HTML data-attribute"
So for instance we capture a checkbox on the form for "Company Events" that is then stored on the Lead(person) object as seen below.
How does that get turned into an HTML data-attribute?
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML :: data-attr to after</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div><span data-checkbox-value="1"></span></div>
<div><span data-checkbox-value="0"></span></div>
</body>
</html>
Where does the line go?
<span data-checkbox-value="{{Lead.Marketing Communications}}"></span>
Sorry kinda new to all this, trying to get my bearings.
And thanks for your explanations.
<span data-checkbox-value="{{Lead.Marketing Communications}}"></span>
Yes, like that.
You're injecting a "1" or "0" into an HTML attribute, that's all.
Tried it with no luck. This is what I have (just testing for one value currently):
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>HTML :: data-attr to after</title>
<style>SPAN {{lead.PC-Manhattan Events:default=}}="1"]:after {
content: "Yes";
}
SPAN {{lead.PC-Manhattan Events:default=}}="0"]:after {
content: "No";
}
</style>
</head>
<body>
<p>Test Area</p>
<div><span data-checkbox-value="{{Lead.Manhattan Events}}"></span></div>
</body>
</html>
You can see the LP's here
using test@test.com for email address
Submission Landing Page URL: http://na-sj19.marketo.com/lp/561-BRX-192/OP-Preference-Center_OP-Preference-Center-Landing-Page.htm...
Confirmation Landing Page URL: http://na-sj19.marketo.com/lp/561-BRX-192/OP-Preference-Center_OP-Preference-Center-Confirmation.htm...
Thank you-
I don't know what you're trying to do in that CSS, but there's no way it's going to match your <SPAN>.
Please take a closer look at how my demo CodePen page works. You should be placing the {{lead.token}} only in the HTML, not in the CSS. The value is output into the data-checkbox-value attribute on the SPAN. You don't place it in the CSS: the CSS is static.
My mistake - I copied the wrong CSS in the previous example.
It looks like this:
<style>
SPAN[data-checkbox-value="1"]:after {
content: "Yes";
}
SPAN[data-checkbox-value="0"]:after {
content: "No";
}
</style>
<p>Test Area</p>
<div><span data-checkbox-value="1"></span></div>
<div><span data-checkbox-value="0"></span></div>
<div><span data-checkbox-value="{{Lead.Manhattan Events}}"></span></div>