-
developer12345Asked 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.
-
jherwinReplied on August 27, 2020 at 5:38 AM
Are you referring to something like this (see screenshot below)?
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.
-
developer12345Replied on August 27, 2020 at 9: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..
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
-
Patrick_RReplied 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!
-
developer12345Replied on August 27, 2020 at 1: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?
-
Patrick_RReplied on August 27, 2020 at 3: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;
}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!
-
developer12345Replied on August 30, 2020 at 7: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
-
Patrick_RReplied on August 30, 2020 at 9: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!
-
developer12345Replied on August 30, 2020 at 12:07 PM
ok..will do it in the end n will get back to u if need