Make Lightbox Transparent, Center and no Scroll bars

  • Profile Image
    greenscape
    Asked on March 18, 2013 at 08:41 PM

    I am having trouble formating the lightbox for the form on my landing page. Here are the problems I need to fix.

    1. I am having an issue editing the form to format centered on the lightbox on the homepage without scrolling.

    2. I would like the background behind the envelope on the lightbox to be transparent. Can this work?

    Click 'Get A Price' on this page to find the form. http://olivebranchlawncare.com/landing/greenscape

  • Profile Image
    EltonCris
    Answered on March 19, 2013 at 12:35 AM

    Hi,

    To make it centered and to remove the scroll bars, add this CSS on top of your form light box embed code. This also makes the background transparent.

    <style type="text/css">

    .jt-feedback div, iframe, .jt-content{

    background-color: transparent !important;

    }

    .jt-content{

    overflow:hidden !important;

    }

    </style>

    This is tested on my local html file taken from your page and it works fine. You should also increase the lightbox width, it's on the lightbox embed code under width. Example:

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.2213" type="text/javascript">

    new JotformFeedback({

    formId:'30764420323142',

    base:'http://jotform.us/',

    windowTitle:'Contact Form with Blue Envelope Theme',

    background:'transparent !important',

    fontColor:'#FFFFFF',

    type:1,

    height:600,

    width:550

    });

    cursor:pointer;

    </script>

     

    Screen:

    Hope this helps. Thanks!

     

  • Profile Image
    greenscape
    Answered on March 23, 2013 at 02:38 PM

    This works great. Thank You!

  • Profile Image
    sidharth_kch
    Answered on March 23, 2013 at 04:04 PM

    On behalf of my colleague, you are welcome.

    Should you have any questions please feel free to contact us.

    Thanks,

    Sidharth