Have the option to add sub labels on form collapses.

  • SuperSeriesAAA
    Asked on May 31, 2014 at 2: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. 

  • KadeJM
    Replied on May 31, 2014 at 4: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;

    }

  • SuperSeriesAAA
    Replied on May 31, 2014 at 4: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.

  • David JotForm Support Manager
    Replied on May 31, 2014 at 5: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.

  • BryanPaulo
    Replied on May 31, 2014 at 6: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.

  • SuperSeriesAAA
    Replied on June 1, 2014 at 2: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.

  • BryanPaulo
    Replied on June 1, 2014 at 4: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.