How can I make the scale options appear in tens?

Daniel_Hannemann

Gefragt am 2. Juli 2024 um 11:03

I cannot make my desired change to my form, or more specifically to my "scale evaluation".
I can only create a scale from 0-10. However, I need a scale that goes from 0 to 100, but in steps of 10.
How can I adjust the scale in a scale rating so that it contains 0/10/20/30/.../100?
Eduardo Jotform Support

Geantwortet am 2. Juli 2024 um 11:19

Hi Daniel,
I escalated your request to the relevant team and I'll give you feedback as soon as possible.
We appreciate your patience while we work on this.

Eduardo Jotform Support

Geantwortet am 2. Juli 2024 um 13:49

Hi Daniel,

We can do that by adding a CSS code to your form. Now, we will use the Single Choice widget, replacing the Scale Rating. Let's start by adding the CSS code. It's easy. Let me show you how:

In the Form Builder, select the paint roller icon in the upper-right corner.
In the Form Designer panel on the right, go to Styles at the top.
Enter your code under Inject Custom CSS. All changes are saved automatically.

Here's the code you need to insert in your form.

/* {Making the scale options appear in tens} - {16485781}*/ 



.form-line[data-type="control_radio"] .form-multiple-column {

display: flex;

flex-wrap: nowrap;

flex-direction: grow;

justify-content: space-between;

}



.form-line[data-type="control_radio"] .form-radio-item label:before, .form-line[data-type="control_radio"] .form-radio-item label:after {

display: none;

}

.form-line[data-type="control_radio"] .form-radio-item input:checked+label{

background-color: #2e69ff;

color: #fff;

border-color: #2e69ff;

}



.form-line[data-type="control_radio"] .form-radio-item label {

font-family: Inter, sans-serif;

list-style: none;

box-sizing: border-box;

min-height: 20px;

position: relative;

cursor: pointer;

word-break: break-word;

display: flex;

width: 40px;

height: 40px;

border: 1px solid;

font-size: .75em;

border-radius: 50%;

font-weight: 500;

align-items: center;

justify-content: center;

flex-shrink: 0;

padding: 0;

background-color: #e1e9ff;

color: #8894ab;

background-color: #fff;



}



.form-line[data-type="control_radio"] .form-radio-item label:hover {

color: #2e69ff;

border-color: #2e69ff;

background-color: #E1E9FF;

}



.form-line[data-type="control_radio"] .form-radio-item input {

list-style: none;

box-sizing: border-box;

outline: 0;

margin: 0;

text-align: left;

position: absolute;

opacity: 0;

height: 1px;

width: 1px;

overflow: hidden;

clip: rect(1px, 1px, 1px, 1px);

}



.form-line[data-type="control_radio"] .form-radio-item:first-child, .form-line[data-type="control_radio"] .form-radio-item:last-child{

all: unset;

position: absolute;

bottom: 0px;

color: #8894ab;

font-size: .75em;

pointer-events: none;

}

.form-line[data-type="control_radio"] .form-radio-item:first-child label:hover, 

.form-line[data-type="control_radio"] .form-radio-item:first-child label, 

.form-line[data-type="control_radio"] .form-radio-item:first-child input, 

.form-line[data-type="control_radio"] .form-radio-item:first-child input:checked+label,

.form-line[data-type="control_radio"] .form-radio-item:last-child label:hover, 

.form-line[data-type="control_radio"] .form-radio-item:last-child label, 

.form-line[data-type="control_radio"] .form-radio-item:last-child input,

.form-line[data-type="control_radio"] .form-radio-item:last-child input:checked+label{

all: unset;

}

.form-line[data-type="control_radio"] .form-radio-item:first-child{

left: 0px;

}

.form-line[data-type="control_radio"] .form-radio-item:last-child{

right: 0px;

}



/* Ends here */

Now, let's create a Single Choice field.

In Form Builder, click on Add Form Element on the top left part of the page.
Select Single Choice and add it to your form.
Click on the Properties icon on the Single Choice field.
Choose the Options tab.
Insert these in the field Options.