Hide Lightbox After Form Submission

Overview

The current lightbox embed code generated by Marketo does not disappear when the form is submitted. It will reload the page after form submission, and the form will appear again. If you would like to create a lightbox that hides after form submission, then please follow the steps below.

How to Guide

1. After creating your form in Marketo, generate your embed code. To do this, click Form Actions, and then click Lightbox as code type. Copy and paste this code into a text editor, so you can edit it in the next step.

2. Replace all the code after “(form)” in your embed code with the code below:

{
var lightbox = MktoForms2.lightbox(form).show();
form.onSuccess(function(){
lightbox.hide();
return false;
});
});
</script>

{

var lightbox = MktoForms2.lightbox(form).show();

form.onSuccess(function(){

lightbox.hide();

return false;

});

</script>

3. After step 2, the completed version should look like the code below. The code is now ready to be used on your website.

<script src="http://app-sj04.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_0000"></form>
<script>MktoForms2.loadForm("http://app-sj04.marketo.com", "AAA-BBB-CCC", 0000, function (form){
var lightbox = MktoForms2.lightbox(form).show();
form.onSuccess(function(){
lightbox.hide();
return false;
});
});
</script>