How to Auto-popup a Lightbox Form

September 15, 2021

Automatically Open a Lightbox Form After the Page Is Loaded

To auto-popup a lightbox form after the page is loaded, just insert openOnLoad:true parameter in the lightbox code.

Example:

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV"type="text/javascript">
    var JFL_63431346590960 =new JotformFeedback({
        formId:'YOURFORMID',
        base:'https://form.jotform.com/',
        windowTitle:'YOUR FORM TITLE',
        background:'#FFA500',
        fontColor:'#FFFFFF',
        type:'false',
        height:500,
        width:700,
        openOnLoad:true
    });
</script>

Please be careful when adding the said parameter, you should append comma “,” (without quote) after width parameter. Just do exactly the same as shown above.

Automatically Open a Lightbox Form at the Desired Time

You can delay a lightbox form to appear after the page is loaded.

  1. Get your lightbox embed code.
  2. Insert an id attribute after the anchor tag found on the lightbox embed code.

    Example, id=“lightboxdelay”, check this sample code:

    <aid="lightboxdelay"class="lightbox-21357249698871"style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

    You can also add display:none; property under style attribute to hide the anchor link, as shown on the above example. 

  3. After that, add this script below the lightbox embed code.

    <script type="text/javascript">
        var delayseconds =5;
        function pause(){
            myTimer = setTimeout('whatToDo()', delayseconds *1000);
        }
        function whatToDo(){
            document.getElementById('lightboxdelay').click();
        }
        window.onload = pause;
    </script>

    • 5 – means 5 seconds before the lightbox form to auto-popup. You can change 5 to your preference.
    •  lightboxdelay  – is the id attribute value that we’ve added to the lightbox embed code on step 2. Make sure the id value matched in your code if you’re using a different one.

Check out the 5 seconds delaydemo here.

Automatically Close a Lightbox Form at the Desired Time

  1. Get your lightbox embed code.
  2. Insert this script below the lightbox embed code.

    <script type="text/javascript">
        var delayseconds =5;
        window.onload = closeLightbox();
        function closeLightbox() {
            setTimeout(function(){
                document.querySelector('.jt-dimmer').click();
            }, delayseconds*1000);
        }
    </script>

  3. You can change the delay time from delayseconds variable. 5 means the lightbox will close after 5 seconds.

Important Note: window.onload methods can conflict with each other when called more than one time on a web page. In this case you can use prototype or jQuery methods instead of window.onload method.

Related articles:

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact JotForm Support: https://www.jotform.com/contact/

Send Comment:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: