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
  • 7080 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
    Nadine_Regan1
    Nadine_Regan1
    Level 2
    September 12, 2014
    Hey Kyle,

    it's me again :) I have another question for you. So we are using the lightbox form on a webinar registration page. Basically we have 3 different webinars that people can sign up for and each webinar will have its own light box form with several webinar dates as select drop down.

    What I noticed is that once you fill out the form and hit submit it disappears, as it should, but when you click the register button again and the form pops up again it does not clear the data. That in itself isn't that bad BUT the submit button does not work anymore, it stays in the "please wait" phase. Is there anything that can be added to the script so that it refreshes the form when someone clicks the register button again?

    Thanks, Nadine
    A
    Anonymous
    September 19, 2014
    Hi Kyle,

    Sorry for the delay, I was on vacation last week. I'm working on updating the code you provided. We are trying to accomplish the light box form to automatically display when the site if visitied. Once the form has been submitted, the thank you landing page should display within the lightbox. I'm assuming I can remove hide function and the on.click command.


    I tried the following but the lightbox doesn't show the thank you page. It's stuck on a loop with the Submit button saying "please wait" 

     
     
    <script src="//app-abb.marketo.com/js/forms2/js/forms2.js"></script>
    <form id="mktoForm_85"></form>
    <script>MktoForms2.loadForm("//app-abb.marketo.com", "275-XMK-766", 85,
    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(form){
    // fetch form's jQuery element
    var formElement = MktoForms2.getForm(form.formid).getFormElem();
    // set HTML of element using jQuery
    $.get("http://info.impactlearning.com/Newsletter-Thank-you.html", function(response) {
    formElement.html(response);
    });
    // return false to prevent the submission handler from taking the lead to the follow up url.
    return false;
    });
    });
    </script>
    A
    Anonymous
    October 21, 2014
    Kyle,
    Good work! I'd like to add that modifying this will work with the non-lightbox version of the embedded form. I know I saw a few users looking for this.

    // Add onSuccess handler
    form.onSuccess(function(form){
    // fetch form's jQuery element
    var formElement = MktoForms2.getForm(form.formid).getFormElem();
    // set HTML of element using jQuery
    formElement.html('<h1>Thanks for filling out the form</h1>');
    return false;

    Thanks,
    Ted
    Terms & ConditionsAccessibility statement

    Loading footer...