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

    Change header background color on my form

    Asked by hanban on October 01, 2013 at 04:01 AM

    Hello

     

    Is there a way to show the SECTION headers on my form as a different background colour?

     

    I would ideally like the titles called SECTION 1, SECTION 2 etc to have a light orange background

     

    Thank you in advance

     

    Hannah

    Page URL:
    http://www.jotformeu.com/form/32682296830359

    heading different colour section hello
  • Profile Image
    JotForm Support

    Answered by EltonCris on October 01, 2013 at 05:05 AM

    Hi Hannah,

    Inject the following CSS codes to your form. This should make the section headers background color to light orange.

    #cid_82,

    #cid_93,

    #cid_97,

    #cid_103,

    #cid_114,

    #cid_123,

    #cid_138,

    #cid_144,

    #cid_159,

    #cid_169,

    #cid_178{

    background-color: #FFC457 !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Feel free to change the hex color to anything you like.

    Thanks!

  • Profile Image

    Answered by hanban on October 01, 2013 at 08:44 AM
    Wow, super thanks very much once again!
    Can I ask also how I would add this same colour to the top heading called Application for admission on the same form?

    Thanks!

    Date: Tue, 1 Oct 2013 05:05:53 -0400
    To: hanban_21@hotmail.com
    Subject: Re: Heading colours
  • Profile Image

    Answered by pinoytech on October 01, 2013 at 08:54 AM

    Hi,

    Kindly update the codes that my colleague provide with this:

    #cid_82,

    #cid_93,

    #cid_97,

    #cid_103,

    #cid_114,

    #cid_123,

    #cid_138,

    #cid_144,

    #cid_159,

    #cid_169,

    #cid_178,

    #cid_189 {

    background-color: #FFC457 !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by hanban on October 01, 2013 at 09:15 AM
    Thank you so much!

    I have tried this and it worked the first time, but when I just tried it again with the extra coide in, no joy! Please can you help!
    The colour we would like for the headings is #FFE4B5

    The end of section 9 is still also overlapping with the first part of section 10

    Thank you once again, truly appreciated!


    Date: Tue, 1 Oct 2013 08:54:08 -0400
    To: hanban_21@hotmail.com
    Subject: Re: Change header background color on my form
  • Profile Image

    Answered by pinoytech on October 01, 2013 at 09:26 AM

    Hi,

    I've check your form and I wasn't able to see the codes that we have suggested for your form. Because of that, I've injected it for you and it should be working fine now. Kindly clear your browser cache and cookies then check your form: http://www.jotformeu.com/form/32682296830359

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by hanban on October 01, 2013 at 09:30 AM
    wow! super, thanks for the quick reply, I am so impressed!

    Works perfectly now, all fixed

    Thank you!!

    Date: Tue, 1 Oct 2013 09:26:02 -0400
    To: hanban_21@hotmail.com
    Subject: Re: Change header background color on my form
  • Profile Image

    Answered by pinoytech on October 01, 2013 at 09:37 AM

    On behalf of my colleague EltonCris, you are quite welcome! If you need our assistance, please feel free to contact us again at anytime.

    Have a nice day!