How to display a form and then a thank you message in the same lightbox with a delay before clos

[jibarra1084]

Disclaimer: This is my first post in the community.

I have searched the community for a few hours and I can't find a post or combination of posts that get me where I want to go.

Basically, I have embedded a form on my website that I am able to display in a lightbox, I have a div that appears on submit with a Thank you message, the lightbox closes and stays on the same page and does not display on refresh for know visitors (told you I have been scouring the community threads). 

My problem is that I want to delay the closing of the lightbox on form success for 3 seconds before the lightbox closes.

similar to this but in a lightbox that closes after 3 sec: https://assets.justinmind.com/support/wp-content/uploads/2014/06/Interactive-wireframes-tab-between-...

Here is what I have so far:

MktoForms2.loadForm("//app-ab29.marketo.com", "123-ABC-123", 0000, function(form) {
var formEl = form.getFormElem()[0],
hasNotYouLink = formEl.querySelector(".mktoNotYou"),
mktoKnownVisitor = !!hasNotYouLink;
if (!mktoKnownVisitor) {
MktoForms2.lightbox(form).show();
}
form.onSuccess(function() {
document.getElementById('confirmform').style.visibility = 'visible';
setTimeout(3000);
console.log(document.getElementById('confirmform'));
return false;
});
});

[SanfordWhiteman]

Please highlight your code as JavaScript using the syntax highlighter. Then we'll continue.

[jibarra1084]

edited above

[SanfordWhiteman]

OK. Thanks for highlighting.

First: that's not how setTimeout works. You pass it a function and a timeout in milliseconds.

Second: you need to use the lightbox's onSuccess, which isn't the same as the global onSuccess. This means you must keep a handle to the lightbox object, you can't anonymously show() it.

Also: code is more maintainable when you set the element's state from JS, not directly setting its styles. You can see in the demo that I add a CSS class to the element, which happens to set the visibility, but could do anything you want.

Your CSS, HTML, and JS should be like:

<!-- form result element and related styles -->
<style>
   .form-result {
      visibility: hidden;
   }
   .form-result-success {
      visibility: visible;
   }
</style>
<div class="form-result">
   Thanks for submitting.
</div>
<!-- /form result element and related styles -->

<!-- standard form embed -->
<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>
<script>
   MktoForms2.loadForm("//app-sj01.marketo.com", "MUNCH-KIN-ID", 1234);
</script>
<!-- /standard form embed -->

<!-- custom form lightbox behaviors -->
<script>
   MktoForms2.whenReady(function(form) {
      
      var delayResultUpdateMs = 3000; // how long to wait before acting on POST result
      
      /* -- NO NEED TO TOUCH BELOW THIS LINE -- */
      var formEl = form.getFormElem()[0],
         hasNotYouLink = formEl.querySelector(".mktoNotYou"),
         mktoKnownVisitor = !!hasNotYouLink;

      if (!mktoKnownVisitor) {
         var lbx = MktoForms2.lightbox(form, {
            onSuccess: function(vals,tyURL) {
               setTimeout(function(){
                 lbx.hide();
                 document.querySelector(".form-result").classList.add("form-result-success");  
               }, delayResultUpdateMs);
               return false;
            }
         });
         lbx.show();
      }
   });
</script>
<!-- /custom form lightbox behaviors -->

[Harish_Gupta6]

Below is the code which will show the Close Window button for Confirmation and wait for the user to click on Close button before refreshing the page. You can adjust the CSS property as your your need:

MktoForms2.loadForm("//app-ab29.marketo.com", "123-ABC-123", 0000, function(form) {
var formEl = form.getFormElem()[0],
hasNotYouLink = formEl.querySelector(".mktoNotYou"),
mktoKnownVisitor = !!hasNotYouLink;
if (!mktoKnownVisitor) {
MktoForms2.lightbox(form).show();
}
form.onSuccess(function() {
var formElement = form.getFormElem()[0];
formElement.reset();
form.submittable(true);

var lightbox=MktoForms2.lightbox($('<div><p style="font-size: 32px;font-weight: bold;">Thank you for your message</p><button id="close-popup" style="background-color: #0099CC;border: none;padding: 10px 20px;font-size: 16px;color: #fff;font-weight: 700;margin-top: 40px;cursor: pointer;">Close Window</button></div>')).show()
$('#close-popup').click(function(){
lightbox.hide()
window.location.href = window.location.href;
})

return false;
});
});

[SanfordWhiteman]

This looks like a solution to a different problem.

The requirement was expressed as a delay of 3s before the lightbox closes (staying on the page after it closes, not refreshing). Clicking on the closing "X" wasn't mentioned, and even if it is involved (instead of auto-closing) the stay-on-page requirement remains.

Also, you should not refresh a page with a Marketo form without using the aliId. Any time you're custom-handling Marketo onSuccess (whether from the lightbox or the standard handler) you must parse the returned Thank You URL, which includes that parameter.  The aliId is only parsed on Marketo LPs, but it must be available for forwarding, even on non-Marketo pages.