SOLVED

Lightbox After Form Submitted

Go to solution
Kim_Gandy1
Level 7

Lightbox After Form Submitted

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?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox After Form Submitted

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

View solution in original post

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox After Form Submitted

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
Level 7

Re: Lightbox After Form Submitted

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox After Form 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;

  });

});