Can I put a timer on a lightbox to close it automatically?

Hello,

With the help of your support team weeks ago, I was able to customize the script to get my form to pop-up within the parameters of my website, etc.  What I would like now it to have the pop-up be on a timer.  I'm getting a high bounce rater from website visitors who are arriving at my landing pages, getting the pop-up and then exiting.  Being that you offer no clearly visible 'close button' option (that little 'x' on the upper right-hand corner doesn't suffice and isn't clearly visible on mobile if the margins are off), so the I want to do some A/B testing with landing pages where some pop-ups go off instantly, as they currently are, and some be delayed by a few seconds that I can denote in the script.  Please look at the code of my pop-up in the landing page I listed and please provide the solution.

While on topic - please provide a workaround to embed a customized close button that I can put adjacent to my current 'Get Quote>' button seen on the form.

Thanks for your help!

Jeron

Hello Jeron,

It is a little bit hard to apply CSS to the close button on the right hand top corner because the lightbox style properties are inline and the elements of the lightbox is created after the script works. One could write javascript to change the button or inline style of the elements, but this topic is out of the borders of our Support Team endeavor.

Similarly, the request of yours, a timer, is an occupation of this sort. Hence, we are sorry that we could not supply you a solution at this moment.

However, I will send your request to our team and if there is a solution about your request, we will find one.

Thank you very much for your understanding.

Regards.

Hello,

We have updated our guide on automatic processes on light-boxes. I have added a automatic close script in part C:

https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form?&&updatemessage=892245969

Also you can use this script in your web site. Paste this script below the light-box embed code:

<script language="JavaScript">

  var delayseconds = 5;

  window.onload = closeLightbox();

  function closeLightbox() {

    setTimeout(function(){document.querySelector('.jt-dimmer').click();}, delayseconds*1000);

  }

</script>

I hope this helps. Please feel free to ask your further queries. 

All the best!

Please note that window.onload method can conflict when it is called more than one time on a web page. I see that you are using jQuery on your web page. Hence please use this code instead of the previous one to avoid method conflicts:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

  var delayseconds = 5;

  function closeLightbox() {

    setTimeout(function(){$('.jt-dimmer').click();}, delayseconds*1000);

  };

  $(document).ready(closeLightbox);

</script>

The first line call the jQuery library. You can change it to your default jQuery library selector.

I hope this helps :D

Cheers.

Ok team,

I want to make sure we're all on the 'same page' because this got rather confusing. 

I you noticed on the code of the webpage url I provide, I have two versions of the same jotform embedded unto the page:

(a) An iFrame version which stays stationery on one of the sections of my site, and then a

(b) A lightbox, which its code produces a link, however, I had your team alter the script so that it pop-ups; which is this following code:

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

var parentWidth = window.innerWidth;

if(window.innerWidth <= 600) {parentWidth = window.innerWidth-40;} else {parentWidth =  700;}

      var JFL_62756794322161 = new JotformFeedback({

        formId: '62756794322161',

        base: 'https://form.jotform.com/',

        windowTitle: 'FREE QUOTE FORM',

        background: '#FFA500',

        fontColor: '#FFFFFF',

        type: 'false',

        height: 500,

        width: parentWidth,

        openOnLoad: true

      });

    </script>

<a class="btn lightbox-62756794322161" style="margin-top: 16px">Jeron Music Quick Quote</a>

============

I attempted to add the new 'delay timer code' you supplied below the end of the light box code where it ends (<a class="btn lightbox-62756794322161" style="margin-top: 16px">Jeron Music Quick Quote</a>), however, the code continues to pop-up immediately 'openOnLoad'.

Please provide the exact code I need to enable my lightbox to produce the effect I'm seeking.

Thanks.

- Jeron

Setting up the openOnLoad to False should stop the form from auto popping up. Your original question is how to auto close the popup box after a few seconds. If you need to implement this, just add the following script below the lightbox codes:

<script language="JavaScript">

  var delayseconds = 5;

  window.onload = closeLightbox();

  function closeLightbox() {

    setTimeout(function(){document.querySelector('.jt-dimmer').click();}, delayseconds*1000);

  }

</script>

5 means 5 seconds. Just change it to your desired timeframe.

Please do note that the disadvantage of this is the lightbox will auto close after the set time, will make you lose everything in the form. If you want to keep the data, consider enabling the autofill feature.

https://www.jotform.com/help/227-How-to-Enable-Auto-Fill-on-Forms 

Lastly, you can choose to use iframe or lightbox. Any method should work. 

I guess there was a mis communication from my initial when I started this thread.

Actually, I didn't want it to autoclose after the page loads (although, it's handy to know how to now).  What I DID need is for it to auto-OPEN 'after' the page loads.  For example, someone lands on my landing page, they browse for a bit, and THEN the form pop-ups -- just like any other standard pop-up would operate, where you can set it to open after 5, 10, 15, 60 or however many seconds you note.  Please provide code for auto-open.  I did turn the 'openLOAD' to false, but now I need it to auto-open after a time that I set.  Sorry if ther ewas any miscommunication.

- Jeron

No worries, and thanks for the clarification. :)

Actually, there is also a guide for auto-open after the desired time on the link provided to you by my colleague.

https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form?

Please check the method B. A sample script is also provided.

<script language="JavaScript">

var delayseconds = 5;

    function pause() {

    myTimer = setTimeout('whatToDo()', delayseconds * 1000)

    }

   function whatToDo() {

document.getElementById('lightboxdelay').click();

    }

window.onload = pause;

</script>

If you need further assistance, let us know.

Success! A little involved but works fine.  How do I create a close button adjacent to my 'Get Quote' button, that will give users the chance the close the pop-up.  (The little 'x' on the right hand corner of Jotforms sometimes get cut off).  I don't want frustrated or low-attention span users to stop browsing because of the pop-up and leave the site all together.  All good pop-ups allow for closing the form.  Please provide code and a way to customize this.

If you haven't yet known, the lightbox button can also be closed easily by clicking on the dim area (anywhere outside the lightbox window). This is normally how lightbox works.

But if you want to customize the close button, you can insert this CSS code after the lightbox embed code. Feel free to adjust the values according to your preferences.

<style>

div[style*="close-wiz"] {

    background:none !important;

    width: 30px !important;

    margin-top: 0px !important;

    margin-right: 6px !important;

    height: 30px !important;

}

div[style*="close-wiz"]:before{

    content:"✖";

    background:#b97905;

    height:35px;

    width:36px;

    font-size:20px;

    display:block;

    line-height:36px;

    border-top-right-radius:4px;

    font-family:tahoma, sans-serif;

}

</style>

It'd give you the following:

Hope this helps!

No, this doesn't help.  My bounce rate is too high on my landing pages because website visitors don't necessarily see the 'X', even if it is enlarged.  I want a text button (comparable to the size of your standard submit button) that I can customize with words such as text 'close', that will act in the manner of the forms close button.

Please advise.

I would recommend you to hire a front-end developer, in order to create the proper script and HTML button to close the lightbox: 

http://stackoverflow.com/questions/16627507/how-to-add-a-close-button-to-jquery-lightbox 

http://stackoverflow.com/questions/24968910/closing-a-lightbox-by-clicking-a-button-and-outside