Stop second lightbox from appearing

[trevlarrr]

I have a lighbox that opens when one of the download buttons is clicked but I've noticed a second empty lightbox opens in the top left corner too, I'm guessing it's to do with the 'show' command on both the form and the onSuccess but what do I need to change to prevent this second one from appearing?

<script src="//go.wilmingtonplc.com/js/forms2/js/forms2.min.js"></script> 
	<form id="mktoForm_13497"></form>
	<script>var instanceURL = "//go.domain.com",	munchkinId = "000-XXX-000", formId = 13497;

	var gateLinks = document.querySelectorAll(".lightboxGated"),
	  ready = function(form){
			form.addHiddenFields({
				"axcoLastReportID" : this.id
			});
			MktoForms2.lightbox(form).show();
		};

	[].forEach.call(gateLinks,function(link){
  	link.addEventListener("click",function(e){					  
		MktoForms2.loadForm( instanceURL, munchkinId, formId, ready.bind(this));		
		e.preventDefault();     
	});
});
      
	</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'><h2 style='color: #ff4338; text-align: center;padding-top:10px;'>Thank you! </h2><p style='color: #0C2340; font-size: 16px; text-align: center;padding:20px;'>Your selected report has been sent to the email address provided</p></div>";
      formEl.parentNode.replaceChild(thanksEl, formEl);
      return false;
   }
});</script>

[SanfordWhiteman · Accepted solution]

Your problems are a bit broader than that. You also are creating a new Marketo form object every time the person clicks, but you should be using the same shared form every time. See this CodePen demo: nation/336022 - MktoForms2 :: Shared lightbox, dynamic hidden field.

[trevlarrr · Accepted solution]

Thanks @SanfordWhiteman , assume that's the difference between the var and const keyword?

Also though, since updating with that code the thank you message no longer appears, on filling out the form it hangs on 'please wait' (or download if it's a known user) but doesn't progress to the thank you message (although the email does fire off in the background so it is still registering the success). The live page is here,  do you know what could be stopping that now?

[trevlarrr · Accepted solution]

Never mind, figured out there was a } in the wrong place, below the onSuccess line, moved it to after return false; and now the thank you message displays perfectly.

[SanfordWhiteman]

---

Thanks @SanfordWhiteman , assume that's the difference between the var and const keyword?

Nope, that’s just modernizing your code a bit. All browsers, even IE 11, support let and const now.

The fix is to look for an existing form with MktoForms2.getForm(formId) rather than creating a new one all the time.

[trevlarrr]

Not sure if this needs a new thread but although that change makes the 'thank you' message appear now, but when you go to download another report it brings up a frozen form (see below) rather than the 'known user' screen. Do you know what's preventing that now? If you refresh the page and click to download then the known user screen does appear but not without that

[SanfordWhiteman · Accepted solution]

Known Visitor HTML can’t work because you’re only loading the form once per session. The Munchkin cookie association necessary for KV HTML is happening in the background and won’t take effect until the page has been reloaded.

If you want to show a “button only” form after the form has been submitted once during a given pageview, you’d need to refactor the code to lightbox that alternate form under different conditions.

The “frozen” looking form is because the form is always left in that state when you override the onSuccess action (even if the form is ejected from the DOM, that’s what it looks like, though people don’t always realize it!). Check the updated CodePen to see how to work around that.

[trevlarrr]

That's great, thanks for all your help with this!