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

    Have the option to add sub labels on form collapses.

    Asked by SuperSeriesAAA 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. 

    Page URL:
    http://form.jotform.us/form/41157324776155?

    font different then and form collapse sub-label
  • Profile Image
    JotForm Support

    Answered by KadeJM 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

    Answered by SuperSeriesAAA 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
    JotForm Support

    Answered by BDAVID 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

    Answered by BryanPaulo 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

    Answered by SuperSeriesAAA 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

    Answered by BryanPaulo 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.