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 change the background color of heading?

    Asked by thelookbook on April 11, 2012 at 06:30 AM

    How to change the background color of heading?

    style heading background color colour
  • Profile Image
    JotForm Support

    Answered by mliz on April 11, 2012 at 06:56 AM

    You can use Inject Custom CSS feature of JotForm  to change the background of the heading.

    Here's how to add your custom css:

    1. Open your form in JotForm
    2. Click on 'Setup & Embed'
    3. Choose 'Preferences'
    4. Select 'Form Styles'  and in the Inject Custom CSS
    add the following code:

    .form-header-group {
       background:none repeat scroll 0 0 #000000;
    }


    Let us know if you need anythin else.

  • Profile Image

    Answered by thelookbook on April 11, 2012 at 07:07 AM

    I have a question, I have changed the background color of the form but the background of heading remains the same. What's the use of changing the background color without changing the background of heading? It looks so odd!

  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 07:50 AM

    In not all situations would one necessarily want to use the same color for the two elements. In the background declaration of the CSS rule provided by my colleague, replacing #000000 with transparent should effect the change you seek. Assuming you also wish to remove the heading's bottom border and the sub heading's top border, the total CSS injected should be as follows:

    .form-header-group {
    background: transparent none repeat scroll 0 0;
    border: none;
    }

    .form-subHeader {
    border: none;
    }

    Tools like Firebug are quite useful when it comes to determining what selector should be used in each rule.

    For information on the shorthand background declaration, please see the section headed "Backgrounds" in this article.

    Incidentally, those light gray sub labels of the Phone Number field are hard to see against the form's orange background. If you need help with styling them, please open a new thread.

  • Profile Image

    Answered by thelookbook on April 11, 2012 at 08:02 AM

    I have think you should add this to the tool bar.

     

    I found that there are too much blank space on both sides of the form, how to solve this? I have make the width smaller but it doesn't work.

  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 08:08 AM

    Yes, I quite agree that a button should be included in the toolbar to more easily change those heading elements. I believe such a request has already been forwarded to our developers but I'll have to check.

    As to the blank space on the form's sides, please open a new thread on the topic and we'll see how best we can assist you.

    Thanks.

  • Profile Image

    Answered by chrisfiori on January 28, 2014 at 07:20 AM

    It's been almost a year and there is still no easy way to change header color?

  • Profile Image

    Answered by jedcadorna on January 28, 2014 at 07:30 AM

    @chrisfiori,

    Unfortunately no updates yet and still injecting custom CSS is the way to modify the color there is no other way as of the moment.