What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to add numbers to each field on my form?

    Asked by r.irving.worc 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.

    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?

    Page URL:
    https://eu.jotform.com/build/62266897497174

  • Profile Image
    JotForm Support

    Answered by Kevin_G 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;

        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.