SOLVED

Hide lightbox form after submission

Go to solution
Lucho_Soto
Level 5

Hide lightbox form after submission

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.  });
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Hide lightbox form after submission

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>

View solution in original post

33 REPLIES 33
Anonymous
Not applicable

Re: Hide lightbox form after submission

Best answer below...
Anonymous
Not applicable

Re: Hide lightbox form after submission

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>

View solution in original post

Anonymous
Not applicable

Re: Hide lightbox form after submission

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
Level 10 - Community Moderator

Re: Hide lightbox form after submission

Anonymous
Not applicable

Re: Hide lightbox form after submission

Thank you so much!! Works perfectly!

Anonymous
Not applicable

Re: Hide lightbox form after submission

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
Level 10 - Community Moderator

Re: Hide lightbox form after submission

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

Anonymous
Not applicable

Re: Hide lightbox form after submission

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
Level 10 - Community Moderator

Re: Hide lightbox form after submission

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 }