Hide lightbox form after submission

[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

<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) {

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>

[Nadine_Regan1]

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

[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" 

 
 

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

[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