Hide lightbox form after submission

[Lucho_Soto]

I have the form code below to embed a Marketo form as a lightbox.
 
<script src="//app-sj04.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1244"></form>
<script>MktoForms2.loadForm("//app-sj04.marketo.com", "980-GBD-747", 1244, function (form){MktoForms2.lightbox(form).show();});</script>
 
However, the lightbox currently does not disappear when the form is submitted, it just reloads the page and pops up again. Marketo does provide a code for this (see below), but I don’t know how to combine the two pieces of code together so that it’s a lightbox AND it disappears after it is submitted. Can someone who knows JavaScript help me make this code work? Thanks!
 
1.  MktoForms2.loadForm("//app-sjst.marketo.com", "980-GBD-747", 1244, function(form){
2.  //Add an onSuccess handler
3.  form.onSuccess(function(values, followUpUrl){
4.  //get the form's jQuery element and hide it
5.  form.getFormElem().hide();
6.  //return false to prevent the submission handler from taking the lead to the follow up url.
7.  return false;
8.  });
9.  });

[Anonymous]

Best answer below...

[Anonymous · Accepted solution]

Here you go: the MktoForms.lightbox(form).show() call returns the lightbox object, so you can store it in a variable and .hide() it later.

<script src="http://app-sj04.marketo.com/js/forms2/js/forms2.js"></script>

<form id="mktoForm_1244"></form>

<script>MktoForms2.loadForm("http://app-sj04.marketo.com", "980-GBD-747", 1244, function (form){

// create lightbox and store it in variable

var lightbox = MktoForms2.lightbox(form).show();

// Add onSuccess handler

form.onSuccess(function(){

// hide the lightbox

lightbox.hide();

// return false to prevent the submission handler from taking the lead to the follow up url.

return false;

});

});

</script>

[Anonymous]

Hi I'm having trouble. I've added this to every page on our site so no matter the entry point I catch them with the lightbox form at least once. but I want it to disable completely for the session once they x out of it. Any help here? Here's the code I have:

<script src="//app-aba.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1043"></form>

<script>MktoForms2.loadForm("//app-aba.marketo.com", "648-VJF-461", 1043, function (form){

var lightbox = MktoForms2.lightbox(form).show();

form.onSuccess(function(){

lightbox.hide();

return false;

});

});

</script>

[SanfordWhiteman]

See here: MktoForms2 :: Suppress form on close/success

[Anonymous]

Thank you so much!! Works perfectly!

[Anonymous]

For this hide - does it only hide when you submit the form?

What if they filled out the form and refreshed the page - will the form show again or is there a way to hide it since we already know the user?

Thanks.

[SanfordWhiteman]

This type of "hide" is different. What you're talking about is the "If Known Lead, Show.." option in the form's Setup.

[Anonymous]

How would the “If known lead” work with a lightbox? Our goal is to avoid the lightbox if we know who the lead is.

[SanfordWhiteman]

I showed this exact thing in a relatively recent post... can't look for it now as I'm on the road. But the technique is to have a script in the Known Lead HTML that hides the whole modal (.mktoModal) by adding a class. You prepare the form's custom CSS with the_same_class { display: none }