Customize Design of Form Collapse Field

  • Profile Image
    EscolaElSol
    Asked 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 

  • Profile Image
    Chriistian
    Answered 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
    Raimon Goberna 
    Answered 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
    Chriistian
    Answered 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.