How to get rid of background color?

  • foundsheep
    Asked on April 12, 2016 at 12:12 PM

    I've done what I would normally do to remove any background colors on a form but it continues to show on my site. I'm getting frame background, a page background and a drop shadow. None of which I want. I just want the fields to show ... nothing else.

    Jotform Thread 816454 Screenshot
  • Nik_C
    Replied on April 12, 2016 at 1:30 PM

    Did you re-integrate your form after you changed all colors?

    Since I checked the form itself and I didn't see a shadow or other colors.

    If no, please change colors as you wish and integrate your form again to your website and let's see if that works?

    We'll wait for your response.

  • foundsheep
    Replied on April 12, 2016 at 1:42 PM

    I never could get rid of the color so I just matched the page bg to the form. There's still way too much padding/margins, though. I've compenstated via my site CSS, but I'd rather get rid of it on the form.

  • Kevin Support Team Lead
    Replied on April 12, 2016 at 2:50 PM

    This code should help you to get rid of the background color and the box shadow:

    .form-all, .supernova{

     background: transparent !important;

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

    }

    The same to manage the margin and padding of your form:

    .form-all, .supernova{

    margin: 0px;

    padding: 0px;

    }

    You will need to add this CSS code in the Designer, to open it you need to click on the Designer icon on the top toolbar: 

    How to get rid of background color? Image 1 Screenshot 30

    Once there you need to click on the CSS tab and paste the code there:

    How to get rid of background color? Image 2 Screenshot 41

    Hope this helps. 

  • foundsheep
    Replied on April 12, 2016 at 3:11 PM

    Margin and padding are still there.

  • Kevin Support Team Lead
    Replied on April 12, 2016 at 3:28 PM

    I have checked the form embedded on your website and I can see that the CSS code was applied: 

    How to get rid of background color? Image 1 Screenshot 30

    This is how it is currently looking: 

    How to get rid of background color? Image 2 Screenshot 41

    What exactly are you trying to achieve? 

    Perhaps changing the width of the form could help, in that case this is the code that could help you with that: 

    .form-all{

     width:100%;

    }

    You will need to change the 100% value depending on what you want to achieve.

    Also, if possible provide us the details about how would you like your form to be displayed, we will be glad to help you. 

  • foundsheep
    Replied on April 13, 2016 at 8:42 AM

    The screen shot you have there is the result of me adjusting the padding on my site not via the form's CSS. I have padding-top set to -60 so it will align the way you see it there. I'd rather not have to set it to that extreme value.

     

    If you view the link to the form you'll see it still has way too much top padding.

    https://form.jotform.com/61025095917961

     

    Not sure why it's so difficult to adjust padding. It's a basic css function.

  • foundsheep
    Replied on April 13, 2016 at 8:45 AM

    FYI ... this is the correct CSS to get rid of padding:

    .jotform-form {
     padding: 0px 0;
  • Nik_C
    Replied on April 13, 2016 at 10:01 AM

    That's correct, you could also put:

    . jotform-form {

    padding: 0;

    }

    Please let us know if you have further questions.