-
adeAsked on April 15, 2018 at 2:19 PM
Im looking at least to create some number input that look like those, where should i start?
-
Support_Management Jotform SupportReplied on April 15, 2018 at 4:25 PM
We have a field called a SPINNER that allows this same kind of input.
However, design-wise, it's totally different from what you have on your screenshot.
I used some CSS to make the design as close as possible to the image on your post and here's what I came up with:
https://form.jotform.com/81045784248967
Below are the codes I used to design the spinner:
.form-spinner input {
font-size : 70px !important;
text-align : center !important;
box-shadow : none !important;
}
li[data-type=control_spinner] {
border-right : 1px solid #eee;
}
.form-spinner {
height : 100px;
width : 100px;
border : none !important;
}
.form-spinner-up, .form-spinner-down {
position : relative;
border : none !important;
background : none !important;
left : -47px;
padding : 0 !important;
margin : 0 !important;
cursor : pointer !important;
}
.form-spinner-up {
top : -15px;
}
.form-spinner-down {
bottom : -15px;
}
Complete guide: How-to-Inject-Custom-CSS-Codes
Feel free to clone the form I created if needed.
-
signsideaReplied on April 15, 2018 at 4:55 PM
Great look, is there any way to update this to work with the Card style?
I really need that one to get the final style im looking for.
Thank you so much that is amazing!
-
Support_Management Jotform SupportReplied on April 15, 2018 at 6:49 PM
Sadly, this won't work with the Cards Layout. CSS injection is only available with the Classic Layout. The closest thing that is related to a spinner would be the EMOJI SLIDER and the STAR RATING.
Why not try the emoji slider? This field has an EVALUATION SLIDER input type that would look like this:
Then right below that, set your ROWS and COLUMNS as follows:
Although they don't look alike, functionality-wise, it's still the same with the spinner field.