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 auto incrementing numbers in Configurable List widget

    Asked by itchai on November 23, 2014 at 03:45 AM

    Hi,

    Th

    is looks like a very useful tool. I would like to know if there is a way to make the first column a counter - to automatically put a number starting at 1, then 2, etc. for each row that the user wants to add. The field wouldn't be interactive (the user couldn't change it), but it will give the total number of rows that he puts in.

    Thanks



    This is a re-post of a comment on How to Set Up the Configurable List Widget



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    counter rows auto number configurable list spreadsheet widget auto-increment style numbers
  • Profile Image
    JotForm Support

    Answered by jonathan on November 23, 2014 at 06:03 AM

    Hi,

    Unfortunately, I think you cannot achieve that using the Configurable List widget.

    There is no means to add a dynamic counter/number that auto increment when new row is added on the widget.

    BUT I think what you can instead use is the Spreadsheet Widget(link: http://widgets.jotform.com/widget/spreadsheet)

     

    using the Spreadsheet widget, you can add a similar grid-like input field that will allow computation of cell/input data.

    Hope this help. Please tell us if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by itchai on November 23, 2014 at 12:45 PM

    Thanks for the answer.

    I'll use the spreadsheet unless I can think of another way of posing the question. The spreadsheet is definitely useful, but I really like the elegance of the Configurable List widget!

    Regards

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 23, 2014 at 01:29 PM

    On behalf of my colleague, your are welcome! If you have another question, please open a new thread, we will be glad to assist you.

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2014 at 04:13 PM

    @itchai

    After researching the possibility of numbering the entries in the Configurable List widget (because it seemed like a cool idea!), I was able to come up with this solution. The numbers can be styled in many ways, as can be seen in this fiddle whose idea I got from this one.

    As to applying the solution to your own jotform, if you were to clone my jotform, open the widget's wizard and scroll down to the Custom CSS section, you would see the following code:

    #list {
    counter-reset: counter -1;
    }

    #list tr:before {
    content: counter(counter);
    counter-increment: counter;
    display: inline-block;
    width: 20px;
    font-size: 18px;
    margin-right: 5px;
    text-align: center;
    }

    #list tr:first-child:before {
    content: "";
    }

    If you want the numbers in your own jotform to look like that, just copy the code above to its Configuarable List widget and save it.

    If you would like additional assistance with this, we'd be happy to help.


    Cheers

  • Profile Image

    Answered by itchai on November 23, 2014 at 05:39 PM

    Thanks abajan.

    It works like a charm. Very much appreciated.

    Cheers

  • Profile Image

    Answered by TycenDemolitions on May 01, 2016 at 09:46 PM

    One again abajan great solution! Replacing the default CSS with the above worked for me....

  • Profile Image

    Answered by designwithluv on June 28, 2016 at 04:27 AM

    thank you this is super helpful!

  • Profile Image

    Answered by ethiele on August 10, 2016 at 12:09 PM

    I just used this code - worked great! Is there a way to label the column (e.g. Priority)?
  • Profile Image
    JotForm Support

    Answered by BDAVID on August 10, 2016 at 12:32 PM

    @ethiele, your new question will be addressed on the following thread: https://www.jotform.com/answers/902969 

  • Profile Image

    Answered by BetsyCohen on December 01, 2016 at 09:16 AM

    Thank You so much Abajan!!! Do you think it would be possible to list with months? 

     

  • Profile Image
    JotForm Support

    Answered by olivia on December 01, 2016 at 09:23 AM

    Hi BetsyCohen ,

    I have opened a new thread about your issue. 

    Please follow your thread from this link: https://www.jotform.com/answers/1001649

    Thank you.