Hide lightbox form after submission | Community
Skip to main content
Lucho_Soto
Lucho_Soto
New Participant
August 20, 2014
Solved

Hide lightbox form after submission

  • August 20, 2014
  • 23 replies
  • 7061 views
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.  });
    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
    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>

    23 replies

    Show previous replies
    A
    Anonymous
    August 21, 2014
    Kyle, I like your solution. I documented here: 

    http://developers.marketo.com/blog/hide-lightbox-after-form-submission/
    A
    Anonymous
    Accepted solution
    August 20, 2014
    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>
    A
    Anonymous
    July 21, 2015

    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
    SanfordWhiteman
    New Participant
    July 21, 2015

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

    A
    Anonymous
    August 20, 2014
    Best answer below...
    Terms & ConditionsAccessibility statement

    Loading footer...