Attention: The Marketo Community will undergo scheduled maintenance on Tuesday, August 20th between 10-11 PM PDT. During this time, the Community and its content will not be accessible. We apologize for any inconvenience this may cause.
My preference center form lives on a landing page. Instead of a follow up confirmation page upon submitting the form, I'd like for users to stay on this landing page and receive a lightbox confirmation form. What are your recommendations to build this?
Solved! Go to Solution.
Hi Kim,
Marketo forms have a built-in lightbox function. While commonly used to house the entire form (while it's being filled out) it can also be used to show "Thank You" text only.
MktoForms2.whenReady(function(form) {
var formEl = form.getFormElem()[0],
tyTemplate = 'Thanks! <a class="download-link" target="_blank" href="{{Download.URL}}">Click to download</a>';
form.onSuccess(function(vals, tyLink) {
MktoForms2.lightbox(form).show();
formEl.parentNode.innerHTML = tyTemplate.replace('{{Download.URL}}',tyLink);
return false;
});
});
In this example, you'd set the Follow Up URL (in Form Editor or LP Editor) to the URL of a downloadable document, if applicable. Then that link gets inserted into the thank you text using (very) primitive template-like logic.
(Note I'm not really a fan of setting innerHTML, but in this case it makes the example more concise... in reality, I put Thank You text in a hidden Rich Text area.)
Hi Kim,
Marketo forms have a built-in lightbox function. While commonly used to house the entire form (while it's being filled out) it can also be used to show "Thank You" text only.
MktoForms2.whenReady(function(form) {
var formEl = form.getFormElem()[0],
tyTemplate = 'Thanks! <a class="download-link" target="_blank" href="{{Download.URL}}">Click to download</a>';
form.onSuccess(function(vals, tyLink) {
MktoForms2.lightbox(form).show();
formEl.parentNode.innerHTML = tyTemplate.replace('{{Download.URL}}',tyLink);
return false;
});
});
In this example, you'd set the Follow Up URL (in Form Editor or LP Editor) to the URL of a downloadable document, if applicable. Then that link gets inserted into the thank you text using (very) primitive template-like logic.
(Note I'm not really a fan of setting innerHTML, but in this case it makes the example more concise... in reality, I put Thank You text in a hidden Rich Text area.)
How would you hide a rich text area to only show once the form is submitted?
Along these lines:
CSS:
.mktoForm .mktoHtmlText .thankYouText {
display: none;
}
.mktoForm[data-form-state="success"] .mktoHtmlText .thankYouText {
display: block;
}
Rich Text:
<div class="thankYouText">
Thank you for submitting!
</div>
Forms JS:
MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0];
form.onSuccess(function(vals,tyLink){
formEl.setAttribute('data-form-state','success');
return false;
});
});