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 do I reduce the height of the Form Collapse header

    Asked by steelneil81 on November 23, 2011 at 10:55 AM

    I am looking to reduce the height of the form collapse header. I have tried using 

    .form-collapse-table{height:0px;}

    but this reduces it from the bottom up and doesn't stay central to the middle.

     

    I would also like to change the colour of this header background.

    Page URL:
    http://form.jotform.com/form/13200240163

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 01:38 PM

    Please replace all of your current injected CSS with the following and afterwards let us know if the form collapse headers look right:

    .form-line{
    padding:0;
    }

    .form-collapse-table,
    .form-collapse-mid,
    .form-collapse-right,
    .form-collapse-right-hide {
    height:40px;
    }

    #collapse-text_1,
    #collapse-text_5,
    #collapse-text_6,
    #collapse-text_3,
    #collapse-text_4 {
    margin-top:9px;
    }

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 01:50 PM

    Regarding the background of the said element, please see the following threads:

    How is it possible to change the color of the Expand/Collapse bar?
    Can I edit styles in the form?

    If you require further information on manipulation of the form collapse style, do let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 02:26 PM

    After looking at your form again, I realized that the CSS needed altering even more. Please add the following rules to what I told you to inject above:

    .form-section-closed {
    height:40px !important;
    }

    #id_7,
    #id_8,
    #id_9,
    #id_10,
    #id_11 {
    margin-top:-20px;
    }

  • Profile Image

    Answered by steelneil81 on November 23, 2011 at 02:55 PM

    Brilliant! Thanks for your help

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2011 at 08:35 PM

    You're quite welcome :)