-
barrazasdAsked on April 23, 2025 at 4:14 PM
Hello! I'm using the basic scale rating widget and would like to be able to label more rating options than just the lowest and highest. Can you guide me on how to do that? for example, I want to have 4 rating options as follows:
1 =Unsatisfactory
2 = Needs Improvement
3 = Meets Expectations
4 = Exceeds Expectations
Currently, we are only able to label the lowest and highest of the rating scale. Look forward to your reply.
-
Gian JotForm SupportReplied on April 23, 2025 at 9:25 PM
Hi Sara,
Thanks for reaching out to Jotform Support. The Scale Rating field only allows you to add labels for the highest and lowest rating. However, you can easily add a label to each rating in your Scale Rating field by injecting CSS codes into your form. Here's the CSS codes that you can inject:
span.rating-item-title.for-from {
width: 100%;
text-align: center !important;
}
span.rating-item-title.for-to {
text-align: center !important;
}
.rating-item, #cid_13 span div div .rating-item{
width: 80px;
}
.rating-item:nth-child(2):before, #cid_4 span div div .rating-item:nth-child(2):before {
content: "Somewhat Meets Expectations";
color: #8894ab;
background-color: transparent;
font-size: .75em;
text-align: center;
}
.rating-item:nth-child(3):before, #cid_4 span div div .rating-item:nth-child(3):before {
content: "Meets Expectations";
color: #8894ab;
background-color: transparent;
font-size: .75em;
text-align: center;
}
Let me show you how to inject the codes:
- In the Form Builder, click on the Paint Roller icon on the right side of the page.
- In the Form Designer window on the right, go to Styles.
- Scroll down and paste the code under Inject Custom CSS.
You also need to unshrink the field A2 to make sure the rating options are spread ut just like the other fields, here's how to do it:
- In the Form Builder, click on the Gear icon next to the Scale Rating field.
- In the menu, go to Advanced.
- Toggle off the button under Shrink.
Here's the result:
Give it a try and let us know if you need any help.
Your Answer
Something Went Wrong
An error occurred while generating the AI response. Please try again!