Have the option to add sub labels on form collapses.

  • Profile Image
    SuperSeriesAAA
    Asked on May 31, 2014 at 02:16 PM

    Is there a way to that a collapse title could have two different styles? So essentially, I want a the main title and then under it, in smaller font, want it to have a sort of subtitle. 

  • Profile Image
    KadeJM
    Answered on May 31, 2014 at 04:17 PM

    Yes, that should be possible using custom css codes and injecting them into your form. You will need to specify the collapse field id's to assign these appropriately though. You could also then add more to it and make your subsequent fields smaller in the same way then assign a " font-size ".

     

    Please see this example: - http://form.jotform.us/form/41505836163150  (You may clone it)

    - Notice in my example above that the title for " Collapse 1 " looks different with a different font than that the default in collapse 2. 

     

    And here is the codes I used to create it:

    #collapse_1 {font-family: impact, helvetica, verdana;

    }

     

     

    This is the additional code I added on top of that to make the field smaller:

    #id_6.form-line {font-family: jester, courier, sherwood; font-size: 8px;

    }

  • Profile Image
    SuperSeriesAAA
    Answered on May 31, 2014 at 04:19 PM

    I don't think I explained it correctly. I want two lines (I can do that part), each with their own style, in one collapse title.

  • Profile Image
    BDAVID
    Answered on May 31, 2014 at 05:53 PM

    So far there is no option to add a sub label on form collapses, and styling two lines in the same form collapse label, I think would require downloading the full source code to apply the CSS styling.

    I have opened a ticket request to our second level, if approved and implemented, you will be notified via this thread.

  • Profile Image
    BryanPaulo
    Answered on May 31, 2014 at 06:13 PM

    While waiting for an easier and permanent solution to this, if I may suggest a work around, we can insert html code to the form collapse to have 2 lines with bigger and smaller text. You can use the example code below:

    Your First Text
    Your Sub-label 

    See my example below:

     

    http://content.screencast.com/users/BryanPaulo/folders/Default/media/e28edb43-d83c-4429-9b0e-ad8134e2f0b6/formcollapse.gif

     

    you can use this work around while we are waiting for permanent fix.

  • Profile Image
    SuperSeriesAAA
    Answered on June 01, 2014 at 02:37 PM

    Great! That works! Similarly, how would I align just a certain part of the header to the right? Using CSS makes it all go to the right and I just want the last part of the main header to be aligned right.

  • Profile Image
    BryanPaulo
    Answered on June 01, 2014 at 04:53 PM

    Hi,

    You can try to use the following code:

    <table width="100%"><tr><td width="80%">Text To The Left</td><td width="50%" style="text-align: right;">Text To The Right</td></tr><tr><td><font size="1">Sub-Label</font></td></tr></table>

    Just replace the color coded text:

    Green = Header to the left

    Blue = Header to the right

    Red = Sub-label

    Note: You need to plcae the whole code each time you change any of the text.

    Let us know if you need further help.