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 heading background and text color as well as form collapse box

    Asked by cocinapos on March 23, 2017 at 05:14 PM
    Page URL:
    https://form.jotform.com/70814818837163

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 23, 2017 at 09:02 PM

    For the headerbox, use this:

    [data-type="control_head"] {

        background-color: orange; /* background color */

    }

    .form-header, .form-subHeader {

        color: white !important; /* text color */

    }

    You can also replace the colors with hex colors.

    ---

    For the form collapse box:

    .form-collapse-table {

    background: #fff; /* background color */

    border: 1px solid #fff; /* border color */

    }

    .form-collapse-mid {

        color: #000; /* text color */

     

    }

    For the form collapse box arrows, there are two, hidden and show states.

    /*HIDDEN state*/

    .form-collapse-right-hide {

        background: url(YOUR HIDDEN ARROW IMAGE URL HERE) no-repeat center;

    }

    /*SHOW state*/

    .form-collapse-right-show {

        background: url(YOUR SHOW ARROW IMAGE URL HERE) no-repeat center;

    }

    I have added labels in the code so you can identify which is it for.

    Make sure to replace the text in bold to your preference.

    If you need further assistance, let us know.