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 get rid of background color?

    Asked by foundsheep 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.

    Page URL:
    http://www.hackworthseo.com/services/

    Screenshot
    get rid of can't site and Getting a
  • Profile Image
    JotForm Support

    Answered by Nik_C on April 12, 2016 at 01: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.

  • Profile Image

    Answered by foundsheep on April 12, 2016 at 01: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.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 12, 2016 at 02: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: 

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

    Hope this helps. 

  • Profile Image

    Answered by foundsheep on April 12, 2016 at 03:11 PM

    Margin and padding are still there.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 12, 2016 at 03:28 PM

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

    This is how it is currently looking: 

    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. 

  • Profile Image

    Answered by foundsheep on April 13, 2016 at 08: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.

  • Profile Image

    Answered by foundsheep on April 13, 2016 at 08:45 AM

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

    .jotform-form {
     padding: 0px 0;
  • Profile Image
    JotForm Support

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