Make form and page background transparent using CSS

  • Profile Image
    jguth
    Asked on November 22, 2017 at 12:28 PM

    Hey there,

    Looking to add the "Make Page Background Transparent" and "Make Form Background Transparent" tags but it doesn't seem to actually adjust the Lightbox embed.

    Is there something else we need to do or that we are missing?



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

  • Profile Image
    Jan
    Answered on November 22, 2017 at 01:10 PM

    Is this the form you are currently working with? (https://www.jotform.ca/form/73254540370249

    Please try adding the !important rule in the CSS value, here's an example:

    .supernova {
    background: transparent !important;  
    }

    .form-all {
    background: transparent !important;  
    }

    Here's the result:

    151137408811-23-7a9r0.png

    Hope that helps. Thank you.

  • Profile Image
    jguth
    Answered on November 22, 2017 at 01:40 PM

    Thanks for the quick response. 


    Adding this code does make it appear transparent in the builder, but when you go to embed and select lightbox then preview it is not transparent. here is what it looks like:1511375979Screen Shot 2017-11-22 at 1.38

  • Profile Image
    Jan
    Answered on November 22, 2017 at 02:07 PM

    Please provide the link to the webpage where the form is embedded so that we can further investigate.

    Just to clarify, you would like to make the page and pop-up background transparent, right?

    151137716211-23-z9scr.png

    We will wait for your response. Thank you.

  • Profile Image
    jguth
    Answered on November 22, 2017 at 02:20 PM

    I haven't even gotten to embed it anywhere. In the preview on Jotform its not working :( 

    Looking to make the white transparent section transparent 

    1511378380jotform.png

  • Profile Image
    Jan
    Answered on November 22, 2017 at 02:50 PM

    Please give me more time to work on this issue. I will contact you once I have a solution. Thank you for your patience.

  • Profile Image
    Jan
    Answered on November 22, 2017 at 03:54 PM

    Thank you for patiently waiting.

    I understand that you are using the "Preview" button in the Lightbox Embed wizard. Unfortunately, you need to insert the CSS code above the Lightbox code where the form is embedded. Here's the code:

    <style type="text/css">
    .jt-feedback div, iframe, .jt-content{
    background-color: transparent !important;
    }
    </style>

    Here's how it should look like in the source code:

    151138396311-23-r4n4u.png

    You need to do this in your local files by creating an HTML page and putting the code I provided together with the Lightbox code.

    Here's the result:

    1511383948tsfd.gif

    As you can see, the background color of the pop-up is red because the page background is red. Although, the Lightbox function darkens it because of the opacity. We can change opacity as well using CSS.

    Hope that helps. If you have any questions, let us know