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

    Is there a way to modify the appearance of the form collapse bar?

    Asked by mbillups on January 24, 2013 at 12:11 AM

    I'm looking for a way to modify the font size, hieght and width of the "form collapse" bar. Is it possible to modify it using CSS? if so, what is the class id? Even better, is there a way to modify the appearance using edit options in the form builder?

  • Profile Image
    JotForm Support

    Answered by Welvin on January 24, 2013 at 01:39 AM

    The only way to to modify the form collapse tool is to inject custom CSS codes (How to Inject Custom CSS Codes) to your form. 

    Form Collapse tool is using the Class: form-collapse-table so if you want to edit the overall form collapse tool in your form, use this class instead of the ID. Field ID only works for a specific field.

    Ex:

    .form-collapse-table {

    height: 50px !important;

    width: 200px !important;

    border: 1px solid #ccc !important;

    }

    The font in form collapse tool is using the class: form-collapse-mid 

    Ex.

    .form-collapse-mid {

    font-size: 15px !important;

    }

    The Arrow on the right side is using the class: form-collapse-right-hide

    Ex.

    .form-collapse-right-hide {

    margin-right: -15px !important;

    }


    Let us know if need further assistance.

    Thanks