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 my form to be transparent and remove the spacing at the top?

    Asked by Jim Bower on April 30, 2015 at 12:27 PM

    Hi,

    I can't get my form  background to be transparent. I have looked at various help sources. Your user guide says this

     

    http://www.jotform.com/help/87-Making-the-Form-Background-Transparent

     

    However, this does not work. No matter how many times I type 'transparency' in the space provided, it defaults to white.

    I've also tried setting everything to transparent in your form designer but it doesn't make any difference.

    Also when importing there is a white page background on my page I don't want


    I wouldn't mind if the form itself (area around the input fields) was white, its the huge white page Jotform draws behind it thats the issue. I want my background image to show through.

    Also, how do I get the form to appear higher up?  It appears to leave a big gap at the top of the form.

    Page URL:
    http://www.apexdigital.co.uk/newsite/750Genquiry.html

    Screenshot
    form designer background image JotForm does not work
  • Profile Image

    Answered by AaronSiciliano on April 30, 2015 at 01:13 PM

    Hello Jim Bower,

     

    It appears as though the issue you were having following that guide is that you were typing "transparency" when you needing to be typing "transparent".

     

    I will however show you how to fix the transparency and spacing issues on your form using custom CSS. 

     

    First open your form in the Form Builder, then click on the Preferences button. Click on the Form Styles tab and you can then input custom CSS code into the Inject Custom CSS input box.

     

    In this box you will want to put the following code as shown in the picture below.

     

    .supernova { background-color: transparent !important; } .form-all, .jotform-form { padding:0px !important; }

     

     

    If you have any issues following my instructions please respond back. I hope i solved your problems for you.

     

    Thanks, Aaron

  • Profile Image

    Answered by Ben on April 30, 2015 at 02:29 PM

    The instructions given by Aaron (AaronSiciliano) above are good Jim and will help you resolve the issue.

    When it comes to the code, I would only make few tweaks to it (but as it is it will still work). I would only suggest them since it is easier to make future changes when there is no !important tag and in order to keep all padding except the one at the top.

    This is how the suggested code would look like:

    html.supernova {
     background-color: transparent;
    }
    form.jotform-form {
        padding-top: 0;
    }

    You can see here how to add the CSS code to your jotform: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by jimbower on May 01, 2015 at 05:00 AM

    That's great - it works, thanks guys.

    Just one thing, Aaron, I didn't type "transparency" - that was an error when I typed my post. When trying to amend my form in Jotform, I typed "transparent" correctly and it didn't work, and I just tried it again to make sure.

    Maybe it's some kind of bug you need to look into?

    Jim

  • Profile Image

    Answered by jimbower on May 01, 2015 at 05:08 AM

    Ack!

    I decided to increase the width of my form and did so using the designer feature.

    Now, my white background is back on the page!

     

     

    EDIT : OK, I have fixed this by re-entering the new CSS code. I guess that making an amendment rewrites the CSS and I'll have to put the fix code in every time

  • Profile Image

    Answered by Ben on May 01, 2015 at 09:23 AM

    If you add the CSS code at the bottom of all the other code (not through the designers CSS tab), it should work properly for you Jim, but in general, yes, when you are changing something in Designer it is set to find any rules that would go against it make sure that you can apply your latest changes properly.

    For me it works when I type transparent, but this is how I do it.

    That way - as you can see - your change is shown to you right away :)

    The trick to getting that menu to show you transparency of the form is to right click on the form itself, not on some field.

  • Profile Image

    Answered by WVUPiKapp on April 07, 2016 at 11:28 AM

    I keep having the same problem as Jim Bower. Oddly enough, I have other forms with transparent backgrounds that work the other way.

    I ended up copying and pasting Ben's code and it worked.

  • Profile Image

    Answered by Ben on April 07, 2016 at 12:30 PM

    I am glad to hear that the codes above worked for you :)

    Please do let us know if you have any issues with either of them - with transparency or something else and we would be happy to assist with the same.