How can I make the scale options appear in tens?

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?

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.

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:

1. In the Form Builder, select the paint roller icon in the upper-right corner.
2. In the Form Designer panel on the right, go to Styles at the top.
3. 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.

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

Überhaupt nicht zuversichtlich

10

20

30

40

50

60

70

80

90

100

völlig zuversichtlich

6. Turn on Spread to Colums.

And that's it. Here's the result:

And here's my clone. You can clone it for yourself by following these instructions.

1. Go to My Forms and select Create Form in the upper-left corner.

1. Select Import Form.

1. Select From a web page.
2. Enter the form’s URL, then select Create Form at the bottom.

Give it a try and let us know how it goes.