Rich text features in radio button label?

  • Profile Image
    developer12345
    Asked on August 26, 2020 at 11:50 PM

    I want to add soem color and bold in single choice question label. possible? I searched your forum n thought it wasnt possible so instead wrote a paragraph above the question n added agree or disagree radio buttons, BUT I think as they r 2 separate fields , it'd be difficult to analyze client responses.


    Screenshot
  • Profile Image
    jherwin
    Answered on August 27, 2020 at 05:38 AM

    Are you referring to something like this (see screenshot below)?
    1598520960radio.png
    If so, please try this custom CSS code:

    label#label_input_307_0 {
        color: green;
        font-weight: bold;
    }
    label#label_input_307_1 {
        color: red;
        font-weight: bold;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    developer12345
    Answered on August 27, 2020 at 09:34 AM

    Thanks. This is interesting as well.. but I need to be able to adjust questions not answer choices(agree or disagree).. actually my question is very long (starting from 'Before meetings,.."n i want to bold certain parts of the QUESTION.. n maybe make it different color and be able to start on a new line as well .. 

    Have added another screenshot..

    1598536178long.JPG

    U see 2 para of same text in screenshot..I want my question to be like first para but now its one whole homogeneous body of text.. IF there was a help tooltip option, i would have gladly used it and wouldnt have worried about bolding certain parts.. but with no tool tip n hover text box being too little im left with this option of bolding..

     Any help re question mark help hint or similar is needed n would be highly appreciatd

     

  • Profile Image
    Patrick_R
    Answered on August 27, 2020 at 11:55 AM

    Hi! I believe that you're referring to this form: https://www.jotform.com/form/202394646328460

    Kindly note that question labels cannot have formatting. Placing the paragraph right above the field is the only option available if formatting is required.

    Yes, Questions and Paragraphs are treated differently as 2 separate form elements. But paragraphs aren't actual fields, these are just the regular text elements placed on the form.

    What you can do is, on your Form, enter the formatted text in the paragraph and place it right above the Form Field (like you already did). Then, place the unformatted text in the question label. After this, hide the question label text on the Form via custom CSS. If you do this, you won't face issues while analyzing the responses and your Form will also show well-formatted question labels.

    I hope this solves your problem. For further questions, feel free to get back to us.

    Thank you!

  • Profile Image
    developer12345
    Answered on August 27, 2020 at 01:03 PM

    Thanks. I get it. n how do I hide the question label? custom code for that? That reminds me.. there was a lot of space between question fields,, I tried reducing the space by using the methods given in forum btu couldnt.. is it the minium space I can have?

  • Profile Image
    Patrick_R
    Answered on August 27, 2020 at 03:45 PM

    Hi! Yes, to hide the question label, we can use custom CSS. Spacing between elements can also be reduced by CSS.

    - is it the minium space I can have?

    We should be able to overwrite it with custom CSS code.

    I implemented the following CSS code to achieve this result (screenshot attached for reference).

    #label_204{
    display: none;
    }
    #cid_413{
    margin-bottom: -40px;
    }

    1598557533chrome-capture - 2020-08-28T01

    URL of this prepared form is: https://www.jotform.com/202395755905968
    Feel free to test it.

    Let us know if there is anything else that we can assist you with.

    Thank you!

  • Profile Image
    developer12345
    Answered on August 30, 2020 at 07:27 AM

    I see, so I have to inject this code 

    #label_204{

    display: none;
    }
    #cid_413{
    margin-bottom: -40px;
    }

    into my form designer? actually I was hoping sth simpler like injecting the code in any question field that I want to hide label of..NOT in designer.. bcs I keep editng this form n the question field # or label number is bound to change.. when u saw the form, that field was #204, now its #206.. If i inject this code it will create headache when I add more Qs or shuffle my questions

  • Profile Image
    Patrick_R
    Answered on August 30, 2020 at 09:05 AM

    Hi! Yes, you need to inject that code using these instructions: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Unfortunately, this is the only way to make this work, we'll need to specify this for each and every field in the Inject CSS box, there is no workaround or shortcut method for this.

    Unique names of the fields changes when changes are made to a field label but the field IDs remain unchanged (unless you remove/delete the field completely and re-insert it). CSS code targets Field IDs, so there won't be any issue if you do not delete the field in question.

    Still, I'll ask suggest you to complete your Form design first, then prepare this code and implement it for all of your fields to ensure that your changes aren't lost.

    Thank you!

  • Profile Image
    developer12345
    Answered on August 30, 2020 at 12:07 PM

    ok..will do it in the end n will get back to u if need