How to open a light-box in my website after a delay?

Hi, I would like to use this Opt in form template for our website, but we only want the pop up to appear 5 seconds after user lands on our home page. Can I know how to add the 5 second delay?

Thanks! :)

Hello,

You need yo add some javascript code to your website while embedding your JotForm. This guide includes the information you need:

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

If you encounter troubles while applying this to your website, you can contact us for help. Please do not hesitate to ask questions about JotForm in this forum.

I hope this answer helps.

Thank you.

Hi Seth, thank you for the fast reply! 

I followed through the guide and it works great! However, I would like to have the pop up without the white outer box as shown in the image attached. Is there a way to remove the white box? Thanks!

Also, when i view the web page on my phone, the form is cut off:

Hi Seth, I adjusted the width and height of the lightbox and it looks better now, however, there is a grey background (on the right and bottom) that I can't remove (even when the width of light box is smaller than the form width), and the X button on the top right is cut off. Any idea how i can fix that? There is also a large top padding which I can't seem to remove too.

Thanks!

Hello,

You need to inject CSS code into your index.html or your css file to remove the space right to the scroll bar and to shift the close button to the left. You can use this code in your index.html within your head element:

<style>

div div {

right: 0px !important;

}

.jt-feedback div img {

right: -5px !important;

}

</style>

Or you can paste the code between style tags to your css file.

For the top white space (top-margin) you can add this code into your form. Here is a guide on how to inject css code into your form. You can also add this code to your index.html or css file.

.form-all{

padding-top: 0px;

}

.jotform-form {

    padding: 0px 0 0 0;

}

Remaining spacing belongs to line padding so you can try removing that one also using '.form-line' selector.

I hope this answer helps. Please don't hesitate to contact us for your further queries.

All the best!

Hello,

Sorry for my mistake.

The first code should be like this:

<style>

.jt-feedback div {

right: 0px !important;

}

.jt-feedback div img {

right: -5px !important;

}

</style>

Thanks Seth!

I was able to remove the top padding by injecting css code on jorform, but the style code for the index page does not remove the spacing and adjust the close button.

Do I need to define where .jt-feedback is somewhere else?

Hi,

Did you already remove the excess space, which is the line padding as what my colleague said in order to adjust the form?

If so, please try and let us know if this works.

Regards

Hi Chriistian,

I tried removing the .form-line padding but it only brings the fields closer together, which I do not want that to happen. The grey background still exists and the close button hidden:

Thanks!

Hi,

Can you please give us the site's link where the form is embedded so that we can further check? Please also add a Mobile Responsive Widget to your form. Here's a guide on How to Add a Widget to your Form?

We'll be waiting for your response.

Regards

Hi Chriistian, I've just added the widget to my form.

My site is: http://right-impact.com/index_2.html

Thanks!

Hi,

I'm not completely sure on how to remove the small grey background as it is the container of scroll bar. Maybe you can increase the height of your form and remove the overflow attribute so that it does not need to scroll. This way it should disappear.

About the close button, you can do the following:

.jt-feedback div img {

right: -5px !important;

top: -30px !important;

}

This should do the trick. 

Please contact us again if you need any further assistance.