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 25, 2014
    Hi Nadine,
     
    Sorry for my slow response. We need to make the lightbox code only apply to the form with ID 1800, so we will check the ID inside the click handler.
     
    <script src="//app-sj07.marketo.com/js/forms2/js/forms2.js"></script>
    <form id="mktoForm_1800"></form>
    <script>MktoForms2.loadForm("//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){
    if (form.getId() == 1800) {
    // 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>
     
      Nadine_Regan1
      Nadine_Regan1
      New Participant
      August 22, 2014
      Yeah, I should have known that. LOL.

      The LP I tested it on had a form already on there so when I clicked the button it popped up the existing form in a lightbox and not the one I created which I guess has to do with what you mentioned in your post above. So I took that form out but now my button isn't doing anything at all. We are using an image as button, maybe that has to do with it but then why would it pop up the old form and not the new one?

      <p><a href="#mktoForm_1800"><img id="GetStarted" src="GetStarted_button.png" ></a></p>

      The src tag has the actualy url in it, I just took it out for this post.
      A
      Anonymous
      August 22, 2014
      For clarity's sake, this is how the code should look after you save it in an HTML element:

      <script src="http://app-sj07.marketo.com/js/forms2/js/forms2.js"></script>
      <form id="mktoForm_1800"></form>
      <script>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;
      });
      });
      };
      </script>
      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
      A
      Anonymous
      August 22, 2014
      Kyle: Posted under this account erroneously.
      Nadine_Regan1
      Nadine_Regan1
      New Participant
      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
      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
      New Participant
      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.
      Lucho_Soto
      Lucho_SotoAuthor
      New Participant
      August 21, 2014
      That code worked perfectly, thanks a lot for your help! 
      A
      Anonymous
      August 21, 2014
      Nice solution, Kyle.
      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...