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

Hide lightbox form after submission

  • August 20, 2014
  • 23 replies
  • 7065 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

    A
    Anonymous
    August 20, 2014
    Best answer below...
    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
    Level 10
    July 21, 2015

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

    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
    August 21, 2014
    Nice solution, Kyle.
    Lucho_Soto
    Lucho_SotoAuthor
    Level 5
    August 21, 2014
    That code worked perfectly, thanks a lot for your help! 
    Nadine_Regan1
    Nadine_Regan1
    Level 2
    August 22, 2014
    Hi there,
    where exactly on the LP would this code have to be embedded? I tried adding it to the HTML editor where I created a test button so that when clicked the form would pop-up but MKTO for some reason puts a comment <!-- --> around the script rendering it inactive.

    Also, what would the OnClick event look like for this?

    Thanks.
    A
    Anonymous
    August 22, 2014
    EDIT: actually tested this, and realized that you do not want the form to appear on the page and also in the lightbox, so I added a couple lines to hide the form. There is likely a slightly more elegant way, but the current code works. Another option is to actually initialize the form later, when the button is clicked, but I prefer to have everything loaded.

    Hi Nadine,

    You should be able to copy this code directly into an HTML element in the Landing Page editor.

    The approach I would suggest is pasted below. You must replace the placeholders <instance_pod>, <form_id>, <muchkin_id>, and <button_id> with the correct values. If you are unsure how to do this, please post your copied embed code for the form in question, and I will assist you.

    <script src="http://<instance_pod>.marketo.com/js/forms2/js/forms2.js"></script>
    <form id="mktoForm_<form_id>"></form>
    <script>MktoForms2.loadForm("http://<instance_pod>.marketo.com", "<munchkin_id>", <form_id>, function(form){
    // hide the form when initialized
    form.getFormElem().hide();
    });
    var button = document.getElementById("<button_id>");
    button.onclick = function (){
    // add whenReady handler, which fires for every form on the page
    MktoForms2.whenReady(function (form){
    // create lightbox and store it in variable
    var lightbox = MktoForms2.lightbox(form).show();
    // show the form itself
    form.getFormElem().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>

    Please let me know if this makes any sense! The code in the button's onclick might be the most confusing; the whenReady function simply declares code that executes when a form finishes initialization, but if declared after the form is initialized, it fires once for every form on the page. Thus, if you have multiple forms on the page, this approach is not going to work.
    Nadine_Regan1
    Nadine_Regan1
    Level 2
    August 22, 2014
    Hey Kyle,
    I appreciate your fast reply. I took your code and changed the parts you mentioned and this is what it looks like when I paste it into the HTML editor and save it: (Note that MKTO wraps part of the content into a comment <!-- --> starting on line 3)


    <mce:script _mce_src="http://app-sj07.marketo.com.marketo.com/js/forms2/js/forms2.js"></mce:script>
    <form id="mktoForm_1800"></form>
    <mce:script type="text/javascript"><!--
    MktoForms2.loadForm("http://app-sj07.marketo.com", "053-MXJ-131", 1800, function(form){
    // hide the form when initialized
    form.getFormElem().hide();
    });
    var button = document.getElementById("GetStarted");
    button.onclick = function (){
    // add whenReady handler, which fires for every form on the page
    MktoForms2.whenReady(function (form){
    // create lightbox and store it in variable
    var lightbox = MktoForms2.lightbox(form).show();
    // show the form itself
    form.getFormElem().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;
    });
    });
    };
    // --></mce:script>
    A
    Anonymous
    August 22, 2014
    Kyle: Posted under this account erroneously.
    A
    Anonymous
    August 22, 2014
    (repost under my account)

    Hi Nadine,

    Ah, thanks for posting the code.

    I think I see what's going on. Instead of inserting a "Rich Text" element and clicking the HTML button from the editor, insert an "HTML" element from the panel (screenshot below).


    If you paste the code in there (with normal HTML tags, not mce:script tags), it will not get wrapped in comments. You did the replacements correctly, which is definitely the hard part!

    Please let me know if you get this to work!

    If you're curious, "MCE" refers to TinyMCE, the rich-text editor used in Marketo.

    Kyle
    Show more replies
    Terms & ConditionsAccessibility statement

    Loading footer...