New Participant

Solved

Hide lightbox form after submission

Forum|Forum|11 years ago
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. });

Marketo

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>

// 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

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

A

Anonymous

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"

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>

Nadine_Regan1

New Participant

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

Hi Cristal,

I have modified the script to pull the entire HTML content from the URL you provided (code pasted below). You will likely have to adjust some styles, but the concept is there.

Were you able to confirm that the button ID works using my example?

Best,
Kyle

function(form) {

form.getFormElem().hide();

});

var button = document.getElementById("ext4-ext-gen1362");

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 lightbox

lightbox.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

Hi Cristal,

Could you be more specific about how it is not working? I do think I see what is wrong, but please confirm.

It is important to note that setting the form element's HTML to '<a href="http://info.impactlearning.com/Newsletter-Thank-you.html"></a>' as you have will result in a totally blank page, as there is no content between the opening <a> and the closing </a>. Usually you would wrap text in an anchor tag to make it link to a page; in this case, you would need to paste the entire HTML source of the page into that area if you wanted to display the page as it exists at that URL. You can also fetch the HTML content of a page using a jQuery $.get request, store it in a variable, and put the variable name as the parameter to the .html() function instead of a string.

I can work out an example of that and post it here soon, but to make sure you are using the correct button ID, can you test if the code I pasted below shows a (very basic) success message?

Hope it works!

function(form) {

form.getFormElem().hide();

});

var button = document.getElementById("ext4-ext-gen1362");

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 lightbox

lightbox.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

formElement.html('<h1>Success! Thanks, ' + form.FirstName + '.</h1>');

// return false to prevent the submission handler from taking the lead to the follow up url.

return false;

});

};

</script>

A

Anonymous

Thanks for your response Kyle. Unfortunately, it doesn't seem to be working for me. I'm assuming I might have the wrong Button id... Below is what i've tried to implement.

function(form) {

form.getFormElem().hide();

});

var button = document.getElementById("ext4-ext-gen1362");

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 lightbox

lightbox.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

formElement.html('<a href="http://info.impactlearning.com/Newsletter-Thank-you.html"></a>');

// return false to prevent the submission handler from taking the lead to the follow up url.

return false;

});

};

</script>

A

Anonymous

Hi again, Cristal,

This is actually far simpler than I thought... no message-passing necessary.

Although the lightbox does load the form in an iFrame, you can still script it through the MktoForms2 API. Here is the modified embed code that just replaces the form with a success message (replace <POD>, <MUNCHKIN_ID>, <FORM_ID>, and <BUTTON_ID> with correct values from your page and the form's original embed code):

MktoForms2.loadForm("//<POD>.marketo.com", "<MUNCHKIN_ID>", <FORM_ID>, function(form) {

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 lightbox

lightbox.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

formElement.html('<h1>Success! Thanks, ' + form.FirstName + '.</h1>');

// 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 works for you!

A

Anonymous

EDIT 2: This information is irrelevant, as there is a far easier way to do it. See Kyle's post below.

EDIT: Not worth it to repost, but this is under the wrong account. Again. Answer by Kyle H.

Hi Cristal,

That is a little more difficult to do from the context in which we are executing the code above, due to the same-origin security policy that prevents the main page from running scripts that access the lightbox iFrame's HTML document.

What you would have to do is set up message-passing between the iFrame and the main page, implementing a message handler in the iFrame that actually carries out the logic to display the thank-you message when it is told to do so by the main page. I will post a quick example here when I have time, but https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage has technical details about how cross-origin communication can be set up between the two HTML documents.

Best,
Kyle

A

Anonymous

Does anyone know how to display a thank you message within the lightbox instead of hiding it? I'm trying to iframe the thank you page but haven't had any luck. Any help would be greatly appreciated!

Nadine_Regan1

New Participant

Thanks a lot for your help, Kyle.

I finally got it to work and it's awesome :-)

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded