How to Auto-Popup a Lightbox Form

June 24, 2024

Jotform offers many embedding features. Embedding Form as a Lightbox can be useful in case when you need a form to be opened in a separate pop-up window. You can set a form window to be opened automatically after the page is loaded.

To auto-popup a lightbox form after the page is loaded, click on the customize button in the Lightbox sharing window.

How to Auto-Popup a Lightbox Form Image-1

In the opened window you should enable Open on Page Load checkbox and click on the Save Changes button.

How to Auto-Popup a Lightbox Form Image-2

After that, you can preview and then embed your lightbox form into your webpage.

Manual Setup

You can manually add the parameter to auto-popup a lightbox form after the page is loaded right into the embed code, just insert openOnLoad:true parameter in the 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>

Note

Please be careful when adding the said parameter, you should append comma “,” (without quote) after width parameter. Just as shown in the example 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:

<a id="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. 

  1. 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 delay demo 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>

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

Important

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:

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:

  • noorsuhada999 - Profile picture
  • Thuê xe máy quảng bình - Profile picture
  • Banz - Profile picture
  • sajilbabu - Profile picture
  • Investelite Research - Profile picture
  • Sergio - Profile picture
  • Navneet Singh - Profile picture
  • davidvm - Profile picture
  • Sophie - Profile picture
  • sathya g - Profile picture
  • priyatamil - Profile picture
  • Annoyomus - Profile picture
  • 22ndcenturymedia - Profile picture
  • DN - Profile picture
  • ToToPaPa - Profile picture
  • bayviewboom - Profile picture
  • bayviewboom - Profile picture
  • bayviewboom - Profile picture
  • Prafull vyas - Profile picture
  • Norby - Profile picture
  • buddy - Profile picture
  • leanneoleary - Profile picture
  • bgringer912 - Profile picture
  • shilpi - Profile picture
  • townzcarz - Profile picture