Include an option to add a sublabel to the Multiple Choice field

  • Profile Image
    cccwebmaster
    Asked on February 10, 2018 at 05:41 PM

    Does anyone know how to 'break into' the form widgets to enter comments and other explanatory text?

    For example, checklists have checkboxes and labels, but I need to add format-able text to each of the checklist items, something like this:

    []  Platinum Level
         (sponsors two conference speakers)

    I need to be able to format the second line (font size, color, etc.).

    It would be nice simply to insert a text box anywhere in these widgets, really.  I understand I'd have to diddle with the positioning once the box is in there, but this would take far less time than I've already spent trying to figure this out.

    I don't think this is such an unusual request.  Forms should assist and inform users how to fill them out, right?  Well, I don't see many of these widgets that assist users in this way other than hover text, but this is not intuitive (how would a user know to hover?).

    Help appreciated, thanks!

  • Profile Image
    Jim_R
    Answered on February 11, 2018 at 12:54 AM

    Can you tell us the name of the widget you're referring to? Since you never mentioned which form you're working on, I looked at the last 2 forms you edited and none of them shows widgets in use.

    What I'm seeing are MULTIPLE CHOICE fields. Is this where you're hoping to add explanatory texts? The multiple choice field is commonly called as a checkbox.a checkbox in its default nature has only 2 elements - A check box and an option for that respective check box.

    The option serves as the description of what each box is for. Have you seen the HOVER TEXT feature of our form fields? This allows you to add further info when users place their mouse over a certain field on your form. 

    Going back, if you are referring to a widget, please share its name, or share the URL of your form so we can have a better look.

  • Profile Image
    cccwebmaster
    Answered on February 11, 2018 at 11:08 AM

    Sorry Jim.  I should've mentioned this.  I'm using the PayPal tool exactly, but I was also referring to the simple checkbox and radio button tools.  Or...anything that has a "label" with it.  (I use the term 'widget' as any pre-built tool, including the 'elements' that come with JotForm - too used to my day-job nomenclature, I guess.)

    As I mentioned in my original note, Hover doesn't really work for my needs.  Our user base is basically older, and they don't intuitively move their mouse around a form just to 'explore.'  Secondly, a lot of them simply print out the forms to study them before going online to make choices, or...they actually fill out the paper forms and mail them in!

    Where I would like to add explanatory text as first choice is to be able to simply insert a text box somewhere 'into' the widget/tool, instead of above or below it.  However, I realize that this is dropping a rock into the puddle of CSS, so it would be nice to at least be able to create a sub-label that I can format.

    What I'd at least like to understand out of all this is why some elements can have sub-labels and why others can't (e.g., Text Box vs Checkbox).

    Hope this is clearer, thanks.

  • Profile Image
    Welvin
    Answered on February 11, 2018 at 02:05 PM

    It's not possible without doing a workaround of adding a new item then adding CSS to make it look like a description of the item above it.

    The sub-label is based on the input type, and I think our developers considered it this way or the usage. Well, some other form builders have this option to add sub labels to all field types. I can send a feature request ticket if you want.  

    We can help you configure the form and workaround with sub-labels. Just please let us know here or create a new thread with all the items that you want to change. That's the only way for now. Or, maybe, add a text field with the description of the product items, below the product field. That may work for your clients. 

  • Profile Image
    cccwebmaster
    Answered on February 11, 2018 at 05:57 PM

    Thanks, Welvin.  I think you should submit a ticket, if not for the actual item, at least for the concept.  I realize that "sublabel" is not completely accurate, but the actual item works well enough to leverage.

    As far as the workaround you offered, use the example I gave in the opening of this thread, and here is the link to the form:

    https://www.jotform.com/build/80406064608150

    Even though I have many of these, all I need is the workaround for the example I provided.  I'll learn from this and leverage for the rest of the items.

    Thanks!

  • Profile Image
    Jim_R
    Answered on February 11, 2018 at 08:21 PM

    Try the following CSS format to add another line underneath the options within your MULTIPLE CHOICE field.

    #label_input_58_0 {

      white-space: pre-wrap;

    }

    #label_input_58_0:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    #label_input_58_1 {

      white-space: pre-wrap;

    }

    #label_input_58_1:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    #label_input_58_2 {

      white-space: pre-wrap;

    }

    #label_input_58_2:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    #label_input_58_3 {

      white-space: pre-wrap;

    }

    #label_input_58_3:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    #label_input_58_4 {

      white-space: pre-wrap;

    }

    #label_input_58_4:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    #label_input_58_5 {

      white-space: pre-wrap;

    }

    #label_input_58_5:after {

      content: "\A\00a0\00a0\00a0\00a0\00a0(sponsors two conference speakers)";

      font-size: 14px;

    }

    Result:

    The codes above will basically do the following:

    1. Add a line break before the content so it moves to the next line and 5 non-breaking spaces to move it a bit towards the right.

    2. Add the content that should be displayed (these are the texts enclosed in parentheses).

    3. Then, change its font size so its a bit smaller than the actual option label.

    4. This will then be repeated 6 times for all 6 options, each pointing to a unique ID for the respective label.

    When you're about to apply these codes, you just need to change the texts within the parentheses.

    I also elevated your thread as a feature request. The request is about adding an option to add a sublabel to the MULTIPLE CHOICE field. But, keep in mind that there's no assurance whether this will be implemented. It will highly depend on the viability of the feature, the amount of similar requests we get, along with the workload of our Developers.

    We can't give you any timeframe but we'll keep you apprised on this same thread when there's an update.