Lightbox After Form Submitted

[Kim_Gandy1]

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?

[SanfordWhiteman · Accepted 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.)

[Kim_Gandy1]

How would you hide a rich text area to only show once the form is submitted?

[SanfordWhiteman]

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;
  });
});