Skip to main content
J
jibarra1084
New Participant
February 4, 2020
Question

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

  • February 4, 2020
  • 5 replies
  • 6370 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; }); });
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

SanfordWhiteman
SanfordWhiteman
Level 10
February 4, 2020
Please highlight your code as JavaScript using the syntax highlighter. Then we'll continue.
J
jibarra1084Author
New Participant
February 4, 2020

edited above

SanfordWhiteman
SanfordWhiteman
Level 10
February 4, 2020

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

 

 

 

 

 

 

Terms & ConditionsAccessibility statement

Loading footer...