What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to set a transparent background on form?

    Asked by psasf on January 16, 2017 at 07: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.

  • Profile Image
    JotForm Support

    Answered by Mike on January 16, 2017 at 08:37 AM

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

    .supernova {
    background: transparent !important;
    }

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

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

  • Profile Image

    Answered by psasf on January 16, 2017 at 09: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
     
    ...
  • Profile Image

    Answered by psasf on January 16, 2017 at 09: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
    ...
  • Profile Image

    Answered by psasf on January 16, 2017 at 09: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 
     
    ...
  • Profile Image

    Answered by psasf on January 16, 2017 at 09: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/
    ...
  • Profile Image
    JotForm Support

    Answered by AIDAN 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.