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

    Is it possible where I have check box labels

    Asked by turboChyll on May 18, 2016 at 06:45 AM

    Is it possible where I have check box labels such as "Not to exceed parts cost" or "Urgency" to include a sub label underneath to say "Select One"

     

    Like:

    Urgency

    (select one)

    check label select sub label
  • Profile Image
    JotForm Support

    Answered by Charlie on May 18, 2016 at 11:23 AM

    Unfortunately, there's no option to add sub labels on the check boxes.

    You could add a "Hover Text" to assist or inform your users.

     

    However, there are ways on how to aesthetically add sub labels on your check boxes.

    Method 1: Simply add it directly in the label name and use some HTML tags. Below is a screenshot of my example, I basically just added <br><sub>(Select One)</sub>

    Press enter, this is how it looks like:

    Please do note that if you edit that label the HTML tags will be stripped out. 

     

    Method 2: You'll see custom CSS code. Here's an example:

    #label_33:after {

        content : "\A(Select One)";

        white-space: pre !important;

        font-size: 11px !important;

    }

     

    #label_33:after is basically the ID for the label "Not To Exceed Parts Cost" and we want to add the sub label after it. 

    content: "\A(Select One)" is used to denote an end of the line and you need to add the text here.

    white-space: pre is to move the content to the next line

    font-size: 11px is to make it more like a sub label font size

    Here's a screenshot on how I added it in my Form Designer Tool:

     

    This is how it looks like when you use the custom CSS code:

     

    You just need to basically change the label ID and the attribute content in my CSS code, and everything should work correctly like a sub label text.

    Let us know if you need more help on this.