SOLVED

Re: Hide lightbox form after submission

Go to solution
Anonymous
Not applicable

Re: Hide lightbox form after submission

Thanks Sanford - I'll check other posts to find it!

Iptor_Webmaster
Level 1

Re: Hide lightbox form after submission

Hi Sanford Whiteman, I'm trying to achieve the same thing with not showing a lightbox form embedded in our website when a known lead returns to the page. I figured I'd find a solution from you in here

Given the age of this thread, I'm having a hard time finding the post you refer to above that uses the technique to give the whole modal a class and hiding that with CSS.

By any chance, could you point me in the right direction?

Thanks,

Mike

SanfordWhiteman
Level 10 - Community Moderator

Re: Hide lightbox form after submission

Can you open a new thread in Products and link back to this one, thanks...

Anonymous
Not applicable

Re: Hide lightbox form after submission

Kyle, I like your solution. I documented here: 

http://developers.marketo.com/blog/hide-lightbox-after-form-submission/
Anonymous
Not applicable

Re: Hide lightbox form after submission

Nice solution, Kyle.
Lucho_Soto
Level 5

Re: Hide lightbox form after submission

That code worked perfectly, thanks a lot for your help! 
Nadine_Regan1
Level 2

Re: Hide lightbox form after submission

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.
Anonymous
Not applicable

Re: Hide lightbox form after submission

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
Level 2

Re: Hide lightbox form after submission

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>
Anonymous
Not applicable

Re: Hide lightbox form after submission

Kyle: Posted under this account erroneously.