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

  • Profile Image
    sammilow
    Asked on February 07, 2017 at 08:55 AM

    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! :)

  • Profile Image
    seth
    Answered on February 07, 2017 at 09:40 AM

    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.

  • Profile Image
    sammilow
    Answered on February 07, 2017 at 08:55 PM

    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!

  • Profile Image
    sammilow
    Answered on February 07, 2017 at 09:01 PM

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

  • Profile Image
    sammilow
    Answered on February 07, 2017 at 09:55 PM

    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!

  • Profile Image
    seth
    Answered on February 08, 2017 at 01:22 AM

    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!

     

  • Profile Image
    seth
    Answered on February 08, 2017 at 01:28 AM

    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>

     

  • Profile Image
    sammilow
    Answered on February 08, 2017 at 02:35 AM

    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?

  • Profile Image
    Chriistian
    Answered on February 08, 2017 at 02:47 AM

    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

  • Profile Image
    sammilow
    Answered on February 08, 2017 at 02:59 AM

    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!

  • Profile Image
    Chriistian
    Answered on February 08, 2017 at 03:12 AM

    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

  • Profile Image
    sammilow
    Answered on February 08, 2017 at 03:25 AM

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

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

    Thanks!

  • Profile Image
    owen
    Answered on February 08, 2017 at 03:52 AM

    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.