How to add numbers to each field on my form?

  • Profile Image
    Asked on June 13, 2017 at 01:18 PM

    Hi I have found a couple of suggestions of how to add automatic numbering of my questions using CSS.




    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?

  • Profile Image
    Answered on June 13, 2017 at 02: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;


        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: 

    This guide will help you adding the widget to your form: 

    Here is an example about how the form will look, once the CSS code and the widget have been added: 

    Hope this helps.