How to add labels to all rating options in the Scale Rating field?

  • barrazasd
    Asked 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 Support
    Replied 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:

    1. In the Form Builder, click on the Paint Roller icon on the right side of the page.
    2. In the Form Designer window on the right, go to Styles.
    3. Scroll down and paste the code under Inject Custom CSS.

    How to add labels to all rating options in the Scale Rating field? Image 1 Screenshot 40

    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:

    1. In the Form Builder, click on the Gear icon next to the Scale Rating field.
    2. In the menu, go to Advanced.
    3. Toggle off the button under Shrink.

    How to add labels to all rating options in the Scale Rating field? Image 2 Screenshot 51

    Here's the result:

    How to add labels to all rating options in the Scale Rating field? Image 3 Screenshot 62

    Give it a try and let us know if you need any help.

Your Answer