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 can I remove the background color of the header?

    Asked by LegacySolarCoop on September 28, 2016 at 06:28 PM

    Somehow I've gotten messed up and mixed up. The background of my theme wasn't lining up right with the header, so (I though) I was able to adjust it with CSS, then removed it altogether. 

    Then, someone, I was able to set an actual background color for the header, which I did. The result was not satisfying as it created a box around the heading text that just sort of floated in the top of the form. 

    So now, to my surprise, both are showing and I can't figure out how to remove either one again! I wish I could make the header background work to my liking, but since I can't, I'll just have the same background as the rest of the form and make the header font orange instead. 

    But how??

    Page URL:
    https://www.jotform.us/form/62526170759158?preview=true

    heading mixed font header background
  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 28, 2016 at 11:45 PM

    I would suggest you to inject this code to your form: 

    .form-header-group{

     background: transparent !important;

    margin-top: -2%;

    }

    This way you will remove the current orange background for the heading text, this guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    This should be the result: 

    Here is also the link to my cloned form of yours if you want to take a look to the live sample: https://www.jotformpro.com/form/62718969385980 

    Hope this helps. 

  • Profile Image

    Answered by LegacySolarCoop on September 29, 2016 at 11:02 AM

    Thank you, but, I know before I both created and disabled the background color with a design setting somewhere. Are you able to direct me to the actual setting instead of a CSS override?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 29, 2016 at 12:29 PM

    I have found a way to change the background color of the form header, you need to click on it and then you will get the option to style the element.

    But do note that this applies to the header element added from the Basic Fields in the Form Builder:

    If there is other CSS injected code that affects the header then the change you do in the Advanced Designer may not have effect.

    Now regarding to the orange background that you can see at the top of the form, it is an image and it has been applied to the form theme you're using which is this: https://www.jotform.com/theme-store/theme/lovely-orange 

    This is why you cannot change this in the Advanced Designer, maybe what you found before was the first option about changing the header element background color.

    If you would like to change the background orange color then you will need to replace the image or change the header style. 

    For example, this is the code by default in the theme that changes the color: 

    .form-all {

        background-image: url(https://www.jotform.com/uploads/banMedo/form_files/8.png);

        background-repeat: no-repeat;

        background-attachment: scroll;

        background-position: center top;

        background-size: cover;

    }

    In the "background-image" you will find the URL to the current image used, if you would like you may also set another image with your custom color. 

    Please if you have any question, let us know. 

  • Profile Image

    Answered by LegacySolarCoop on September 29, 2016 at 02:18 PM

    This is very helpful, thank you!