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 Make Collapse Bars Have Multiple Colors in Hover

    Asked by wemakeprints on January 21, 2015 at 04:31 AM

    Would you give me an example of how I can change the hover color of each of my form collapse bars? Thanks guys.

    thanks multiple color collapse bars
  • Profile Image
    JotForm Support

    Answered by Charlie on January 21, 2015 at 09:12 AM

    Hi,

    Upon checking your form, it seems that you have already applied the CSS code for changing color in your collapse bars by hover?

    If you haven't found it yet, here's a quick guide.

    1. Navigate to your Form's "Designer"

    2. Inside the Form Designer, navigate to the CSS tab and find this CSS code.

    .form-collapse-table:hover {

        box-shadow : none;

        text-shadow : none;

        background : red; Change the color based from your own preferences 

    }

     

     

    3. Here's my demo cloned form: http://www.jotform.com/form/50203955977968

     

    I hope this helps. Let us know if you need more assistance on this.

    Thank you.

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on January 21, 2015 at 09:25 AM

    Hi,

    I missed the part where you want to change the hover color of each of your form collapse bars. Here's the CSS code for that:

    .form-collapse-table#collapse_4:hover {

        background: red;

        box-shadow : none;

        text-shadow : none;

    }

    .form-collapse-table#collapse_10:hover {

        background: blue;

        box-shadow : none;

        text-shadow : none;

    }

    .form-collapse-table#collapse_14:hover {

        background: yellow;

        box-shadow : none;

        text-shadow : none; 

    }

    .form-collapse-table#collapse_18:hover {

        background: green;

        box-shadow : none;

        text-shadow : none; 

    }

    .form-collapse-table#collapse_21:hover {

        background: gray;

        box-shadow : none;

        text-shadow : none; 

    }

    If you want to have multiple colors, you'll need to remove the earlier CSS code related to hover.

    You'll need to remove this one:

    .form-collapse-table:hover {

     

    }

     

    You can clone my form to see further my custom CSS codes there. Here's a guide for that: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Let us know if you need more assistance on this.

    Thank you.

  • Profile Image

    Answered by wemakeprints on January 22, 2015 at 11:37 PM

    Great as always. Thanks Charlie, I look forward to upgrading my service soon.

  • Profile Image
    JotForm Support

    Answered by Charlie on January 23, 2015 at 08:16 AM

    You're welcome and thank you for your continued support and use of JotForm. I'm glad that it works for you. 

    If you need any assistance again or have other concerns, please do not hesitate to open up a new thread here in the forum, we'll be more than happy to help.

    Thank you.