How to add numbers to each field on my form?

  • r.irving.worc
    Asked 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 Lead
    Replied 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: 

    How to add numbers to each field on my form?  Image 1 Screenshot 20

     

    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.