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

    Customize Design of Form Collapse Field

    Asked by EscolaElSol on June 10, 2016 at 03:20 AM

    Hello,

    I've got FAQ menu, made with different pulldown list showing the different questions. 

    The thing is that I'd like to change the format of the pulldown boxes, both the colour and the font. Is that possible?

     

    Thanks,

    Raimon 

    Page URL:
    https://form.jotformeu.com/61514010990346

    format pulldown font different FAQ
  • Profile Image
    JotForm Support

    Answered by Chriistian on June 10, 2016 at 03:58 AM

    Are you referring to the Form Collapse field in your form?

     

    You can change the color or font of the Form Collapse field by adding/injecting custom CSS code. Example:

    .form-collapse-table {

        background: yellow;

        font-family: monospace;

    }

     

    By adding the sample CSS code above, your Form Collapse field background will be set to yellow and the font of the text is set to monospace.

     

    Can you tell us the specific design you want to implement on the Form Collapse field so we can help you with the custom CSS code that you can use on your form?

  • Profile Image

    Answered by Raimon Goberna  on June 13, 2016 at 04:47 AM

    Hello,

    Yes, I wanted to say form collapse. I'd like to have a menu like this:

    - Font: Helvetica 11, black

    - Box (collapse) Colour: white, 

    - Box (collapse) border: grey

    - Reduce 1/3 of box height

    Thank you!

    Raimon

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 13, 2016 at 05:52 AM

    You can try the following CSS code in your form to implement the design you want to the Form Collapse field:

    .form-collapse-table {

        background: white !Important;

        border-color: grey !important;

        font-family: Helvetica;

        height: 38px !important;

    }

    .form-collapse-table span {

        font-size: 11px !important;

    }

    .form-section-closed {

        height: 40px !important;

    }

    .form-collapse-right {

        height: 38px !important;

    }

     

    You can check this article to know how to inject custom CSS code to your form: How to Inject Custom CSS Codes. You can also check this sample clone form that I used for testing: https://form.jotform.com/61642755521960.

     

    Do let us know if you need further assistance.
    Regards.