Thank you message after lightbox form submission

[aditidutta]

Hi, 
I have a use case where I need to show a pop-up form in a Marketo hosted landing page followed by a thank you message on successful form submission.  I'm using Marketo lightbox embed code for the same. After successful form submission, a user should be able to see a thank you message in the same pop-up. For this, I am using the below script but with this script the thank you message displays for a moment (for even less than a second) and then the pop-up disappears. 

<script>
MktoForms2.whenReady(function(form) {
var formEl = form.getFormElem()[0];

form.onSuccess(function(vals, thankYouURL) {
var thanksEl = document.createElement('DIV');
thanksEl.innerHTML = "<div class='popUp'><h2 style='color: #000; font-size: 38px; font-weight: 300;'>Thank you! </h2><p style='color: #fff; font-size: 16px; text-align: center;'>Thank you for contacting us. We'll reach out to you as soon as possible!</p></div>";
formEl.parentNode.replaceChild(thanksEl, formEl);
return false;
});
});
</script>

I also tried setTimeout function after replacing the form element with the thanksE1 element but no luck. 
Has anyone ran through the same issue before? Appreciate any help on the same.

Best Regards,

Aditi

[SanfordWhiteman]

Please show the rest of your code — there’s no lightbox in use here.

[aditidutta]

Hi @SanfordWhiteman, 

Here is the script that I've added to my landing page. The pop-up needs to be shown once the person moves out of the document. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//info.tadigital.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2691"></form>
<script>// <![CDATA[
var _html = document.documentElement;
var browser_close_trigger = true;

$(_html).mouseleave(function (e) {
			if (e.clientY > 20) { return }
			  // Trigger only once per page
              if (!browser_close_trigger) { return }
              browser_close_trigger = false;
			 MktoForms2.loadForm("//info.tadigital.com", "248-XIT-367", 2691, function (form){MktoForms2.lightbox(form).show();});
			 
        });
// ]]></script>

[SanfordWhiteman · Accepted solution]

You have to use the lightbox’s onSuccess handler, not the the core onSuccess.

MktoForms2.loadForm("//info.tadigital.com", "248-XIT-367", 2691);
MktoForms2.whenReady(function (mktoForm) {
   
   MktoForms2.lightbox(mktoForm, { onSuccess: showThanksEl }).show();

   function showThanksEl(vals, thankYouURL) {
      var formEl = mktoForm.getFormElem()[0],
         thanksEl = document.createElement("DIV");

      thanksEl.innerHTML = "<div class='popUp'><h2 style='color: #000; font-size: 38px; font-weight: 300;'>Thank you! </h2><p style='color: #fff; font-size: 16px; text-align: center;'>Thank you for contacting us. We'll reach out to you as soon as possible!</p></div>";
      formEl.parentNode.replaceChild(thanksEl, formEl);

      return false;
   }
});

(P.S. Never use setTimeout to try to solve event ordering problems, except in the very rare case of setTimeout(0) to queue a task, when you have exact knowledge of how other tasks and microtasks are scheduled.)

[aditidutta]

Hi @SanfordWhiteman, 
Thank you so much.
This has been very helpful and a good learning as well 😊
With this update, I am running into another issue - the form pop-up is appearing twice. Not able to figure out the reason behind the same. Could you please provide some insights here. 

[SanfordWhiteman]

You must be calling loadForm twice. My code above completely replaces your code that loads the form.

[aditidutta]

Hi @SanfordWhiteman, 
I double checked the code but I'm not loading the form twice anywhere. Here is the entire code that is in the page currently.  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//info.tadigital.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2691"></form>
<script>
var _html = document.documentElement;
var browser_close_trigger = true;

$(_html).mouseleave(function (e) {
			if (e.clientY > 20) { return }
			  // Trigger only once per page
              if (!browser_close_trigger) { return }
              browser_close_trigger = false;	 
                        MktoForms2.loadForm("//info.tadigital.com", "248-XIT-367", 2691);
        });
</script>

<script>
MktoForms2.whenReady(function (mktoForm) {
   
   MktoForms2.lightbox(mktoForm, { onSuccess: showThanksEl }).show();

   function showThanksEl(vals, thankYouURL) {
      var formEl = mktoForm.getFormElem()[0],
         thanksEl = document.createElement("DIV");

      thanksEl.innerHTML = "<div class='popUp'><img src='https://na-ab33.marketo.com/rs/895-UFD-655/images/thankyoupop.png' width='120px' height='auto'><h2 style='color: #000; font-size: 38px; font-weight: 300;'>Thank you! </h2><p style='color: #fff; font-size: 16px; text-align: center;'>Thank you for contacting us. We'll reach out to you as soon as possible!</p></div>";
      formEl.parentNode.replaceChild(thanksEl, formEl);

      return false;
   }
});
</script>

[SanfordWhiteman]

You have code inside a Rich Text area on the form that’s also running loadForm. You want to keep all your JS out of the form itself.

[aditidutta]

Thank you so much, @SanfordWhiteman. 

[aditidutta]

Hi @SanfordWhiteman,

Form- prefill was not working with the approach used so far. So, instead now I'm loading the form on the landing page(marketo hosted) using the form element, hiding it using css (display:none) on the page and showing it on mouseleave function. For displaying the thank you message after successful form submission, again running into the same issue where the thank you message is displaying for less than a second and then the pop-up disappears. 

I have added the script below. Appreciate your help on the same

<script>
var _html = document.documentElement;
var browser_close_trigger = true;

$(_html).mouseleave(function (e) {
			if (e.clientY > 20) { return }
			  // Trigger only once per page
              if (!browser_close_trigger) { return }
              browser_close_trigger = false;	 
                     
var formObj=MktoForms2.getForm('2691');
MktoForms2.lightbox(formObj).show();
        });
</script>
<script>
MktoForms2.whenReady(function (mktoForm) {
   
   MktoForms2.lightbox(mktoForm, { onSuccess: showThanksEl });

   function showThanksEl(vals, thankYouURL) {
      var formEl = mktoForm.getFormElem()[0],
         thanksEl = document.createElement("DIV");

      thanksEl.innerHTML = "<div class='popUp'><h2 style='color: #fff; font-size: 38px; font-weight: 300;padding-top:10px;'>Thank you! </h2><p style='color: #fff; font-size: 16px; text-align: center;padding:20px;'>Thank you for contacting us. We'll reach out to you as soon as possible!</p></div>";
      formEl.parentNode.replaceChild(thanksEl, formEl);
      return false;
   }
});
</script>