How to set a transparent background on form?

  • psasf
    Asked on January 16, 2017 at 7:54 AM

    I've tried going to Design/Color Scheme, clicking the BACKGROUND dropdown then moving the slider to transparent and clicking Select.  The background however stays on white.

    I can set the Frame to transparent (what is the frame?) but not the background.

    When I try a second time, a transparent box has appeared at the top of the color selection stack to the left of the main color selector box and white is shown as selected. If I now click the new transparent box the dropdown closes and it stays on white.  I can select any other color from the stack but not transparent.

  • Mike
    Replied on January 16, 2017 at 8:37 AM

    Please try adding the next CSS via form designer to set a transparent background for your form.

    .supernova {
    background: transparent !important;
    }

    How to set a transparent background on form? Image 1 Screenshot 30

    The frame color is corresponding to the background color of the form container.

    How to set a transparent background on form? Image 2 Screenshot 41

    If you need any further assistance, please let us know.

  • psasf
    Replied on January 16, 2017 at 9:45 AM

    I've added that code below the existing code so that it now reads 
     
    .supernova, .jotform-form, .form-all {
        background-color : #ffffff!important;
        box-shadow : 0 0 0 rgba(0, 0, 0, 0) !important;
    }
     
    .supernova {
        background : transparent !important;

     
     
    and the designer is now showing the background as transparent.  The
    Preview is also apparently showing it as transparent.  However, the main
    view (Back to Builder) is not transparent and when I insert/publish my
    form, it's not transparent (it's still white).  
    How do I make it transparent?
    Paul
     
    ...
  • psasf
    Replied on January 16, 2017 at 9:45 AM

     I added the code so that the CSS is now: .supernova, .jotform-form,
    .form-all {    background-color : #ffffff!important;    box-shadow : 0
    0 0 rgba(0, 0, 0, 0) !important;} .supernova {    background :
    transparent !important;} 
    This has resulted in the background being shown as transparent in Designer
    and in Preview, but in the main view (Back to Builder) it's still white and
    when I publish/insert into my website it's still not transparent.
     
    How do I make it transparent?
    Paul
    ...
  • psasf
    Replied on January 16, 2017 at 9:45 AM

     
     
    I added the CSS code and it now reads:
    .supernova, .jotform-form, .form-all {
        background-color : #ffffff!important;
        box-shadow : 0 0 0 rgba(0, 0, 0, 0) !important;
    }
    .supernova {
        background : transparent !important;
    }This has resulted in the background showing as transparent in Designer and
    in Preview but not in the main screen (Back to Builder) and not in the
    published/inserted version.
    How do I make the background transparent in the inserted version? Paul 
     
    ...
  • psasf
    Replied on January 16, 2017 at 9:45 AM

     
    I added the CSS code and it now reads:
    .supernova, .jotform-form, .form-all {
        background-color : #ffffff!important;
        box-shadow : 0 0 0 rgba(0, 0, 0, 0) !important;
    }
    .supernova {
        background : transparent !important;
    }
     
    This has resulted in the background showing as transparent in Designer and
    in Preview but not in the main screen (Back to Builder) and not in the
    published/inserted version.
    Paul
    -------------------------
    Message sent via Atmail Open - http://atmail.org/
    ...
  • AIDAN
    Replied on January 16, 2017 at 11:17 AM

    Hi Paul,

    Please replace all your custom CSS code with this one:

    .supernova, .jotform-form, .form-all {

        background: transparent !important;

        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;

    }

    I also created a corrected form for you in case you would like to clone ithttps://form.jotform.com/70154172813955

    If you need further assistance please let us know. We will be happy to help. Thank you.