How to create a scale rating type question?

Hi,

Can I do this type of scale question as illustrated below.

Thanks,

Rey Galvez

Hi,

You have two options to what to use, you can either use the Rating scale or the Matrix field under the "Survey Tools".

You can also check this guide on how to create a survey form using the Matrix field: http://www.jotform.com/help/158-How-to-create-a-survey-and-customize-it 

Do let us know if you need more help on this.

Hi,

Thank you, but what I wanted to do use the scale rating type question and I want the description/text to be on top of the radio button instead of the rating value and if possible the rating value will be inside the radio button  as illustrated in the picture above that I provided.

Thanks,

Rey Galvez

Unfortunately, we don't have default options to do this, but you could try using custom CSS codes if you are familiar with it.

Here's a sample form that I did http://form.jotformpro.com/form/51168828129967. You can clone it and see the custom CSS code that I used, I placed it under Form Designer Tool->CSS tab. Here's a guide on how to clone it: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

For the tutorials on how to fully utilize the Form Designer, please also do check the guides here: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-.

If you have finalized the form and the look that I made in my test form is okay, then you can share us your form and we'll try to come up a custom CSS code for you.

Hi,

Thanks, Is it possible to add a label that says "Average" above the middle of the radio button. I want to achieve something like the one below in the picture.

Rey Galvez

Hi Rey,

Check this test form http://form.jotformpro.com/form/51171474674963?

Let us know if this is what you need.

Thanks.

Hi,

Thanks, Now I also want to change the size of the radio button so that the numbers will be more visible. Is it possible?

Rey Galvez

You can do that by adjusting the custom CSS code for the radio button. Here's an example:

.form-radio {

    height : 20px !important;

    width : 20px !important;

}

Change the height and width for the radio button to be bigger in size.

I hope that helps.

Thanks.

Hi,

This does not make the circle bigger. I want to change the size of the circle only.

Thanks,

Rey Galvez

Hi mbas123,

Thanks for contacting us again.

Increasing the width and height using custom CSS as cited in example of Charlie should make the circles bigger. Here's how it looks like on my side by making the width and height 30px. To prevent other controls from expanding as well, you should decrease the margin of each circle by adding a margin property. As with the height and width properties, you can adjust it as well to suit your need. Please see CSS and screenshot below.

.form-radio {

    height : 30px !important;

    width : 30px !important;

   margin: -5px;

}

I hope that helps.