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

Forum|Forum|6 years ago
February 4, 2020
1 reply
6377 views

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-inputs.gif

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;
});
});

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

Level 10

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

J

jibarra1084Author

Level 1

edited above

SanfordWhiteman

Level 10

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded