Lightbox After Form Submitted | Community
Skip to main content
Kim_Gandy1
Kim_Gandy1
New Participant
January 11, 2017
Solved

Lightbox After Form Submitted

  • January 11, 2017
  • 1 reply
  • 3505 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

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.)

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
January 12, 2017

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
Kim_Gandy1Author
New Participant
January 18, 2017

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

SanfordWhiteman
SanfordWhiteman
New Participant
January 18, 2017

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;
  });
});
Terms & ConditionsAccessibility statement

Loading footer...