-
r.irving.worcAsked on June 13, 2017 at 1:18 PM
Hi I have found a couple of suggestions of how to add automatic numbering of my questions using CSS.
e.g.: https://www.jotform.com/answers/636104-Question-numbering
and https://www.jotform.com/answers/461346-Through-admn-or-css-how-do-I-number-my-questions
But there are problems here that I hope you can help me to solve:
1 - the numbering starts from 1 on each new page. Is it possible to include the page number e.g. Page 1: 1.1, 1.2, Page 2: 2.1, 2.2 etc. ?
2- is there a way to exclude the titles and text boxes from the numbering sequence?
-
Kevin Support Team LeadReplied on June 13, 2017 at 2:59 PM
I would suggest you to inject this CSS code that will number only the fields, ignoring headings and the buttons:
ul {
counter-reset: item;
list-style-type: decimal;
}
li.form-line:not([data-type="control_button"]):before {
content: counter(item, decimal);
counter-increment: item;
left:0;
top: 12px;
position: absolute;
font-weight: bold;
}
However, if you want to exclude other fields then you will only need to add the "data-type" using the "not" instruction on the CSS code I provided, for example, static text will still be counted, to exclude it I only added its data type to the CSS code, result:
li.form-line:not([data-type="control_button"]):not([data-type="control_text"]):before {
content : counter(item, decimal);
counter-increment : item;
left : 0;
top : 12px;
position : absolute;
font-weight : bold;
}
You will find the data type of a field by right clicking on it and selecting the inspect option, you will get the developers tool, copy the "data-type" value of the <li> element where the field is placed in:
Regarding to add the page number, that will not be possible with CSS code, it would require a complex code to number each page; however, I would suggest you to add the Form Tabs widget to your form, this way your users will know the page they are filling and the fields will be properly numbered no matter the page where they are placed in.
Here is the link to the widget: https://widgets.jotform.com/widget/form_tabs
This guide will help you adding the widget to your form: https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form
Here is an example about how the form will look, once the CSS code and the widget have been added: https://form.jotformpro.com/53376735783973
Hope this helps.