Thank you message after lightbox form submission

Forum|Forum|4 years ago
August 17, 2021
1 reply
6631 views

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

Marketo

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

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

SanfordWhiteman

Level 10

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

A

aditiduttaAuthor

Level 2

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>

SanfordWhitemanAccepted solution

Level 10

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded