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

    How to hide part of labels on the form?

    Asked by rlzolinas on January 19, 2016 at 11:40 AM

    I have a similar question, I'm looking to hide a portion of the label though. Right now I have probably about 50 conditions set up to select a list of names dependent upon the course that is selected. It would be easy to just remove the course number next to the list of names, but if I had to edit the lists, it would be difficult to find each list, because they would all be named the same (Student Name). Is there somewhere to add the course number so it is hidden, but I can see it when I need to edit it?

    Example:

    Student Name (009-01)
    Student Name (101E-01)

    I want to hide the number portion, if possible.

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 19, 2016 at 02:06 PM

    If I understood you correctly you would like to hide field labels, but you are concern that it will be hard to set conditions if labels are hidden. 

    If you remove field labels, than it would be hard to set conditions. However if you hide labels with CSS, labels will not be visible on your form, but you would be able to see them while setting conditions. You can use CSS code that my colleague provided on previous post: 

    .form-label.form-label-top {

        position : absolute;

    }

    .form-label.form-label-top {

        visibility : hidden;

    }

    Inside of this guide you can find out how to Inject Custom CSS codes: 

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You would also need to set labels to be Aligned Top.

    On my demo form I have all labels are hidden, but I am able to see them while I'm setting conditional logic. 

    Here is my demo form: https://form.jotform.com/60185919289974 

    If you have issues with hiding filed labels on your form, please provide us ID of you form and tell us which field labels you want to hide. 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by rlzolinas on January 19, 2016 at 02:33 PM

    Thanks!

    The problem with this is, that I still need the labels, just would like to hide part of it. Or if there is another option to distinguish this somehow.

    You'll understand better if you look at the form: https://form.jotform.com/60183750362957

    I don't want the info in the () to show, but I need it on the backend to distinguish which students belong to what class for editing purposes.

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 19, 2016 at 04:09 PM

    If I understood you correctly you only want to hide label text that is after Student Name

    Is that correct? 

    Looking forward to your reply. 

  • Profile Image

    Answered by rlzolinas on January 19, 2016 at 04:10 PM

    Yes, that is correct. Thanks!

  • Profile Image

    Answered by victor on January 19, 2016 at 05:58 PM

    On behalf of my colleague, you are very welcome. If you have any other question, please let us know. We will be glad to help.

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 20, 2016 at 04:47 AM

    You can achieve that by Injecting Custom CSS. Instead of previous code I provided add this CSS code:

    label#label_45,label#label_95,label#label_99,label#label_104,label#label_101,

    label#label_102,label#label_46,label#label_112,label#label_21,label#label_51,

    label#label_114,label#label_115,label#label_111,label#label_119,label#label_49,

    label#label_121,label#label_123,label#label_50,label#label_136,label#label_138,

    label#label_144,label#label_87,label#label_124,label#label_126,label#label_127,

    label#label_128,label#label_129,label#label_89,label#label_91,label#label_132,

    label#label_134,label#label_140,label#label_141,label#label_142,label#label_143,

    label#label_117,label#label_110,label#label_86,label#label_84,label#label_131,

    label#label_79,label#label_106,label#label_97,label#label_80,label#label_108,

    label#label_47,label#label_82,label#label_93,label#label_48,label#label_78{

    font-size: 0!important;

    }

    label#label_45:before,label#label_95:before,label#label_99:before,label#label_104:before,label#label_101:before,

    label#label_102:before,label#label_46:before,label#label_112:before,label#label_21:before,label#label_51:before,

    label#label_114:before,label#label_115:before,label#label_111:before,label#label_119:before,label#label_49:before,

    label#label_121:before,label#label_123:before,label#label_50:before,label#label_136:before,label#label_138:before,

    label#label_144:before,label#label_87:before,label#label_124:before,label#label_126:before,label#label_127:before,

    label#label_128:before,label#label_129:before,label#label_89:before,label#label_91:before,label#label_132:before,

    label#label_134:before,label#label_140:before,label#label_141:before,label#label_142:before,label#label_143:before,

    label#label_117:before,label#label_110:before,label#label_86:before,label#label_84:before,label#label_131:before,

    label#label_79:before,label#label_106:before,label#label_97:before,label#label_80:before,label#label_108:before,

    label#label_47:before,label#label_82:before,label#label_93:before,label#label_48:before,label#label_78:before

    { content: "Student Name"!important; font-size: 12px!important; }

    This code will affect only on Student Name fields. 

    I have cloned your form and added mentioned code to my form. Here is my cloned form:

    https://form.jotform.com/60186493079969 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by rlzolinas on January 20, 2016 at 10:09 AM

    This is exactly what I needed! Thanks so much! Is it possible to do this for the Course Section & Number dropdowns as well? I need to hide the information in () there too. I tried to follow along with the code above to figure this out myself, but I am lost :-)

  • Profile Image

    Answered by rlzolinas on January 20, 2016 at 10:27 AM

    Nevermind! I think I got it! Thanks!

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 20, 2016 at 11:32 AM

    You're welcome. 

    Feel free to contact us if you have any other questions. 

  • Profile Image

    Answered by rlzolinas on August 19, 2016 at 10:53 AM

    I didn't start a new thread because it is similar to this question- is there a way to do this for dropdown options? I have codes that need to be recorded in the reports, but would like to hide them from the user filling out the form.

    Let me know!

    Thanks!

    Robin

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 19, 2016 at 12:20 PM

    Although your last question is similar to subject of this thread, it is not the same, so I have moved your last question to separate thread and we will provide you an answer there shortly.

    https://www.jotform.com/answers/910843