Configurable List Widget: Automatically add an number for each new row

Hi.!

Is it possible to automatically add an number for each new row? The objective is to automatically number the rows

Hi Willman,

Thanks for reaching out to Jotform Support. Yes, it is possible to add numbers for each row. Let me show you how:

1. In Form Builder, click on the Wand icon right beside the Configurable List Widget.
2. Go to the tab Custom CSS.
3. Paste the following code and click Update Widget.

div#list {

counter-reset: my-sec-counter;

}

.configurable-list-field-row-wrapper::before {

counter-increment: my-sec-counter;

content: counter(my-sec-counter);

margin-right: 15px;

}

Let me show you my result:

That's it. We also have a guide about How to Set Up the Configurable List Widget that you can check out.

Let us know if you have any other questions.

Hi willman,

Thanks for using Jotform. You can inject a CSS code into the Configurable list widget to automatically add a number for each row. Here's how:

1. In Form Builder, click Add Form Element.

2. Go to Widgets.

3. Type and search the Configurable List. Click to add or you can drag and drop it to the form.

4. Once you add the Configurable List, click the Wand icon to go to Widget Settings.

5. Go to Custom CSS, copy the following CSS code below to the text area and click Update Widget:

div#list {

counter-reset: my-sec-counter;

}

.configurable-list-field-row-wrapper::before {

counter-increment: my-sec-counter;

content: counter(my-sec-counter);

margin-right: 15px;

}

Check out the screencast below to see my results:

Give it a try and let us know how it goes.