With the Configurable List widget, you can define and display a set of fields or questions on your form. Your respondents can then add and answer as many of those fieldsets on your form as you allow. This is ideal for asking a set of questions multiple times.
Setting Up the Widget
Here’s how to set up and configure the Configurable List widget:
- In Form Builder, select Add Form Element in the upper-left corner.
- In the Form Elements pane on the left, select Widgets at the top.
- Now, search and select Configurable List.
After adding the widget to your form, its settings pane should show up on the right side. If not, click on the widget’s wand icon to open Widget Settings.
- In the Widget Settings pane on the right, define your fields in the Fields configuration area.
Note: Field declarations should be separated by a line break.
Here’s the list and syntax of supported field types that you can use in your dynamic list:
text
Accepts single-line plain texts.
[label]:text[:placeholder]Examples:
- Name: text
- Email: text: Type here…
number
Accepts numbers only.
[label]:number[:placeholder:step,min,max]Example:
- Quantity: number
- Age: number: Enter your age
- Rating: number:: 1, 1, 10
textarea
Accepts plain texts and line breaks.
[label]:textarea[:placeholder]Example:
- Notes: textarea
- Comments: textarea: Type here…
dropdown
A list of options in a drop-down list.
[label]:dropdown:option1[,option2,...:placeholder]To have one of the options selected by default, replace placeholder with one of the options on your list.
Examples:
- Pizza: dropdown: Cheese, Pepperoni, Sausage
- Size: dropdown: Small, Medium, Large: Please select
- Drink: dropdown: Apple, Orange, Pineapple: Orange
radio
Single Choice (radio button) — select one of the available options.
[label]:radio:option1[,option2,...]Examples:
- Order: radio: Pick-up, Deliver
- Vegetable: radio: Carrot, Radish, Broccoli
checkbox
Multiple Choice — check off available options.
[label]:checkbox:option1[,option2,...]Examples:
- Addons: checkbox: Soda, Salad, Fries
- Sauce: checkbox: Sweet, Sour, Spicy
dateInput
A date picker with calendar pop-up.
[label]:dateInput[:format]If the date format is undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish.
Examples:
- Date: dateInput
- Date of Birth: dateInput: m/d/y
timeInput
A time selector.
[label]:timeInput:format[,now] - The allowed
formatvalues are 12 (with AM/PM selector) and 24. If invalid, it defaults to 12. - To set the current time as default, append “
,now” to the declaration.
Examples:
- Arrival Time: timeInput: 24
- Current Time: timeInput: 12, now
date
A three-field date picker.
[label]:date[:format:range:today]- If the date
formatis undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish. - The year
rangeis formatted as start-end (e.g., 2015-2025). If undefined or invalid, it defaults to 10 years back up to the next year. - To set the current date as default, append “
:today” to the declaration.
Examples:
- Date of Birth: date
- Arrival Date: date: m/d/y: 2025-2030
- Date: date: d/m/y:: today
time
A three-field time selector.
[label]:time[:format,now]- The allowed
formatvalues are 12 (with AM/PM selector) and 24. If undefined or invalid, it defaults to 12. - To set the current time as the default, append “
,now” to the declaration.
Examples:
- Arrival Time: time
- Current Time: time: 12, now
static
Display a message or text.
[label]:static:[text]You can include some basic text-related HTML tags.
Examples:
- Note: static: We are open 24/7.
- Tip: static: Click on the <strong>Add Row</strong> button to add more.
Setting Fields as “Required”
To prevent your form fillers from skipping mandatory fields, you can set them as “required” by adding an asterisk (“*”) at the beginning of the field declaration.
Your form fillers won’t be able to submit the form as long as the required fields are empty.
Setting Up Other Configurations
In the Widget Settings pane on the right, scroll down past Fields configuration under the General tab to see more options to configure the widget.
Here are the available options:
- Minimal rows number — The minimum number of fieldsets to display on your form.
- Maximal rows number — The maximum number of fieldsets allowed on your form. Zero stands for unlimited.
- Label for Add — The text to appear in the “add” button.
Changing How the List Looks
It’s often necessary to style your form to look exactly how you would like, perhaps to match your product image or corporate identity among other reasons. With this widget, you can further customize how the list looks by adding your custom CSS codes.
To apply custom CSS
- Select the widget’s wand icon to open Widget Settings.
- In the Widget Settings pane on the right, go to the Custom CSS tab.
- Enter your custom CSS codes in the textarea.
- Once you’re done, select Updated Widget at the bottom to save your changes.
Send Comment:
150 Comments:
Can I set the minimal rows to another field on the form? Or to a calculated field?
Hi
How to calculate the values in a configurable list ex; the Amount column needs a sum.
Regards
Is there any way to set the default month to last month not the current month?
Hello, is there a general guide to resizing elements in the configurable list widget? I've found some specific case examples people have asked about but I would love to see a more general guide.
Is there a way we can add a number field, but with currency format?
Is it possible to change type of the field or add specific field based on value selected in another field in the same row? For example I want to display “Phone number” of the Relationship dropdown has “Spouse” otherwise display “Year” field for other relationships like Son and Daughter.
This question was asked a couple of years ago:
Configurable List Widget: Ability to separate multiple entries into different rows in the submission table
Has there been any update? I also have a scenario where I want families to register and want to list all family members on one form, but I want each family member to be its own row after form submission so that when I view the list I can easily count totals, totals by age group, etc.
Thanks!
Hello! In the configurable list, once it is generated, I don't see the option to add the fields to the original PDF for printing, like the conventional add menu items. How can I do it?
I am trying to create a list of clothing types with brands and sizes.
But i do not want the options of the brands or size to be the same for each type selection.
I would like to add things like 32x30 for jeans, but not have it as a drop down for a t shirt.
Thank you.
Would it be possible to have each row in a configurable list populate as a separate row in a linked google sheet rather than all responses jumbled in one cell? Thank you.
Would it be possible to add upload a document or picture field option?
How to change configurable list widget layout ?
To be on a seperate line.
The Label and data enter from the right RTL.
Thank You
could we add photo to this configuration list
How to use the Configurable List Widget to make multiple reservations in Calendar?
So that it takes a start date with a start time, weekly repeats, and ends on a certain date?
And how to choose many independent dates and they become many different reservations in calendar?
Maybe there is some form template that already does it? That someone has shared?
Thank you so much
Is there a way i can make all fields permanently viewable rather than having to horizontally scroll to view all fields?
The fields have horizontal scrollers once I add placeholders and adding overflow-x: hidden; in the custom CSS tab (in addition to the sizing) doesn't seem to be disabling the scrollers. Is there a way around this?
Hello. I would like to ask if there's a feature in the configurable list where I can make a pop-up pane when I click the dropdown menu. I am planning to enlist almost 100 items of options, and using dropdown menu would take them time to scroll down/find the items they'd like to choose. If only I could show them a pane under the dropdown menu where they could see all the options easily without scrolling too much. Thank you!
How can I change the Button and Text color for the "Label for Add" optional button. I only see how to change the label text. The existing color is light gray and white text and doesn't stand out.
How can I add file upload?
can i do a default value for TEXT ?
Could the features "start at new row" and a divider be added?
Now I have to use : static : to push a field to a new row.
can we add Row for total ?
How do I make the column of checkboxes move down to the next line? I want to keep the Account Name and Date Reconciled on one line and then have the checkboxes beneath it.
When trying to change the color of field titles, it gets overwritten...
I have to fill only 10 digits. It should not be less and not more than that. How will you do it?
Hello, Using the Configurable List Widget i am having the issue that if i have limited minimal and maximal rows # to 1 i am left with an overtly large space underneath which just adds to much spacing to the widget and the next line, i would like to make the iframe of the widget as close as possible to the height of the fields. Not sure hot to do this with the CSS. Any Help appreciated.
How do I create multiselect options in "dropdown" field in the list widget?
Como adiciono um campo de Auto completar na lista configurável ?
its possible to set a range from today, like, minimun date 22 years before today?
Hello. Is there any way to set a max character limit on a field? For example, I have a number field where I want a max of 6 digits allowed.
Is it possible to restrict duplicate entries per row?
Es posible ocultar un "campo" de la "Lista configurable", basado en la selección de otro campo de la misma lista configurable.
Ejemplo: Tiene hijos? Si/No , por si muestra un campo para ingresar cuantos, por no oculta el campo de cuantos.
I do not see the option for custom css in the wand option of my widgets. Has this feature been removed or repurposed?
The padding (or height) of the date selector and the time selector are different and I can't seem to enter the correct CSS code to fix this.
Can you assist?
Hi all,
Can I make my configurable list to seen completely so that i wouldn't need the bar on below?
Here is my form if that helps;
Thank you!
Can I able to make one option selection populate value in other short text as in condition I cannot see the field name to select as this is whole come under single field.
Can I make the time field a range that shows the duration?
My configurable list is connected to a regular question in my form. If the question is answered "yes", the list shows. If it's answered "no", the list stays hidden. However, when the form is first opened, the list is visible by default. Is there a way to keep it hidden until the question it's connected to is answered?
Can I add pictures on form eg upload files?
Can you associate a max inventory with the number field of this widget?
I need to add some rows to my widget, but I can't seem to figure out how to do it in field configurations.
Is there a way to configure the Minute dropdown list in Time so that it displays the minutes in 15 minutes increments? (i.e. 00,15,30,45)
Please, I´m using a Configurable List Widget.
But it is too long, not looking good.
I saw that you can change how the list looks by adding your custom CSS codes.
But I don´t know how to do it by my self.
Could somebody help me with this, please?...
Hi, we've used this widget for years, and suddenly it seems to be broken. Did something change? I'm afraid to lose data if I recreate the fields, but they no longer display as a configurable list. What can I do to repair it?
Is it possible to auto format a number field as a phone number like 000-000-000 or (000) 000-0000?
How to change the font size?
I'm trying to set up a dropdown selection for swim lesson time (ie. 10 am, 10:30 am, 1:15 pm, etc) because I want people to choose from a pre-determined list rather. But the widget reads the colon in the time (10:30 am) as a separator. Any way to fix that so it reads the colon as part of the text? Thanks!
what if i want to remove the previous answer and only keep the second answer.. how to do that
im referring similar as Matrix Dynamique
How do you change the color of the static text? I got the labels to change, but the description in the text isn't changing. Also, in the two column display, the words aren't wrapping, is there a way to get the words to move to a separate line?
how to add remove button
What are the CSS classes to change the Add Row button background color and font color? The default color doesn't stand out very much.
how to change the color to black font
How do I add an “other” option to the radio field in CL?
Hello. Help me. in a parameterized list field I want the user to write a text but without spaces; What can I write
é possível inserir uma formula de multiplicação entre dois campos numérico para aparecer o resultado na hora que o campo for preenchido? Dentro do widget lista configurável.
How can I add a line break to my configurable list so not all fields are shown in a single row?
can i add "take photo" or "upload photo" option to the list ?
Can I adjust the calendar in a Configurable List between 2 different dates in 1 year.
For example:
July 7 to August 14.
Hello, Please does anyone know how to remove (Add row) button on the configurable list? Thankyou :)
What's the CSS to change the layout of my checkboxes? It's too tall and completely changes the shape of the entire layout since there are so many options.
Alignment to top in "Configurable list"
Hi!
How can I align the fields of the "Configurable list" at the top?
Thank you so much!
When using the number field in the configurable widget, can you disable the up/down arrows to increase/decrease the number?
I have created a form with a configurable list that work fine on the jotform platform. However when i try to imbed the form into my html website, it returns an error message in the place of the "configurable list" ="It may have been moved, edited, or deleted." In addition the signature box and upload documents box is also not visible? I am in need of guidance/
how remove separated line between tow row ?
Hi, how to I remove the "add row" button from the widget configured list?
Thanks
It would be nice to be shown what this looks like in submissions. Does each row get a new row in submissions or will it cram all my entries into one row? I'll have to test it to see, but it would save me time if you went through that on here.
Is there a way align the rows and cells equally so that they don't look like stairs due to text wrapping?
Is it possible to have a "Remove row" button?
Is there a way to hide a portion of the configurable List? I.e. Office Use Only - (this will be used to annotate in Tables.
Calendar : dateInput : yyyy-mm-dd
Office Use ONLY : dropdown : Approved, Denied : Please Select
Is there away to take a value from the Configurable List and populate another field on the form?
i.e.: Automatically populate "Device Score" with the value of "Score" from the configurable list
How can I remove the "add row" button?
how do i pull the information into an excel doc with each row as a different column?
Is it possible to remove the "Add Row" button?
Is there a way to code this app so the latest/newest entry is first?? We get hundreds of people that come in and we want to log them but we want to make sure we don’t have to scroll down a hundred people each time.
Also, is there a way to make sure once an entry is made that it won’t have the option to be deleted?
Hi, I have list that includes text, a checkbox, and then text again. How can I control the width of these three elements? Can you share the CSS code? Thank you!
It appears as though timeInput does produce the same Excel/CSV output as 'time,' but it would be nice if the documentation reflected that and/or 'time' were fixed.
'time' IS BROKEN! timeInput works, but I don't want to change >1000 entries! Please fix!
We want to use the configurable widget to collect ingredients for recipes. On my form it has a "table" that shows "Quantity and Unit" in one column and the second column is "Ingredient". However, when you bring up the pdf it shows "Ingredient" then "Quantity and Unit". How can I get it to show just like it does on the form?
I always love using this one, thank you!
I would like to ask my customer about some of his business figures of the last / future years ... so the first field I would like to predefine, but it should differ from row to row
Example
Minimum two rows, max five rows
field 1: "fiscal year: static: 2021"
=> row 2/3/4/5: 2022/2023/2024/2025
I found the solution with css already, but I use the cards layout. And unfortunately it's no solution for me to change to classic ...
Furthermore: Is it possible to delete rows again (e.g. 2023/2024/2025 already added and afterwards my customer decides not to provide figures for 2025)
Is it possible to have the result of the submission of the configurable list appear on a pdf? I'm not seeing the text field option to fill a pdf submission like other widgets do
hi everyone
how to restrict users from entering number in text box in textbox?
This configurable list wont allow me to change the color of the field text. I would like to change it to white so the text is readable with a darker background. Is this something that can be done?
I've tried to change it with the CSS and it wouldn't allow it.
is this widget going to work with offline forms?
What am I doing wrong?
On the form after summited I can't see the ssn displayed.
Could you provide more information, a short tutorial, or even a page with different Custom Scripts that can be added; or would you have a link to a page that teaches users how to do it? Thanks!
Hello. I've been using Configurable List Widget in my form for several month ( But suddenly look of my widget got broken - the fields of the widget are not in one line. Can you help? Thank you.
There's an issue with the date input, where it adds an extra 0's to the date when editing submissions.
12/08/2022 → 12/008/2022
How to add picture on configurable list
As requested several times below, I would also like the column headers displaying on the + Add row (additional rows) please?
When using a Smartphone the layout gets shrunk to compact, (which is more user friendly, and therefore preferable), however, on the new row, the answer text boxes etc no longer have questions/Iabels so no-one can work out what to fill in.
My form w/ the configurable list used to have the items in the list on separate lines vertically, versus horizontally for each entry (via CSS). It appears that is now broken and everything is displaying horizontally again, even those the CSS has not changed for the widget. Can you please advise how to get the Vertical orientation again?
Hi! Thank you for this article. Question, when I try to add an additional row, the column headers disappear. Especially on a mobile device, I would like our client to be able to see what the field header name is for each additional row they add. Is this possible to repeat the field names when they hit the + button?
At the end of my drop-down selection, I want them to be able to write in an answer if the one they want isn't there, what wording or whatever do I add for that?? So at the bottom of "Fruits" on the order form there is selection of many fruits but then I want also to be able to type in answer. Thanks
Hi, How to change configurable list input fiels position and field size? Can you help with the CSS code?
Looks like there was an update because it's utter mess. Why is the column label repeated on each row?! I have 10+ row tables, now with each row having label repeated.
Is it possible to label each row automatically? Such as 1, 2, 3, and so on?
Hola. Me gustaria saber cual es la cantidad máxima de opciones en la lista de opciones que puedo usar en la lista desplegable?
Gracias.
Is it possible to use the previous entry in a configurable list as the placeholder when a new row is added? For example, in one of my fields there is a dropdown for numbers 1, 2, 3, and 4. The users will enter their information in order and there will be several 1s, then several 2s, etc.. So it is possible to make the next row prepopulate with the previous row's entry?
Hi, would like to change the sizes of the number and textarea input fields; and possibly drop the textarea down to the next line on the form. Can you help with the CSS code?
Thanks!
Hello! How can I adjust the field width on the widget? How it displays on the form? One field is word wrapping when it just needs to be a little wider?
Hi, is it possible for the answers that reach the response table from Configurable list to be displayed in separate columns and rows and not in one column?
how to loop input form QR Code Reader Widget and send SN to Configurable List Widget a new row
How about Picture field type? can I add field for pictures?
Hi, is it possible for different options in the list to have different maximum number amounts.
Ex- I have a drop down with values: T-Shirts and Pants, and I want the maximum for the T-shirts to be 5 and the Pants to be 10. Is there any way to configure as such?
tarih seçici türkçe nasıl yapılır?
Can I change the separators in the output of the Configurable List from commas to something else? A less common character ideally :)
Hi,
Could you share the CSS code to adjust the column width? The PDF version of the submissions display the table but some columns are super tight and other very wide making it difficult to read the entries. Thanks!
I need to configure the Search Bar & category to my Form which would reflect my data of client details as per nature of business, contact details , company member, designations of the company working employee serving contact numbers 7 etc. , for Example: if we search by name a company " Accur Digitus" the details should come of Director s & employees email, contact number, Designation, Nature of business.
The dat is on Excel which need to genreate online on jotform for data base.
so, its a humble request to help on this case
hola buen dia, me gustaria que la lista configurable se pueda autocompletar.
Hi,
Is it possible to a add number list which increments per row?
Currently, I've a form which uses static field type to display text/numbers however these text/numbers are all the same on each row. I would like to have it so each row has a different number... Would it possible to achieve this through static field type or any other field type?
Please any advice on how to go about this would be greatly appreciated.
Thank you in advance,
When accessing the Configurable List output in a CSV file, it appears to format the output thusly:
"Key1: Value1, Key2: Value2, Key3: Value3"
The problem is that some of my keys have commas in them, and the free-form answers may have commas in them as well. I can theoretically finagle something to capture any text between a colon and the last comma before another colon, but if my question has commas in it I'll be capturing part of the question as well (not good).
Is it possible to specify a delimiting character(s) for this widget? Let's say I chose '|' as my delimiter. The CSV output for this widget could then be:
"Key1:Value1|Key2:Value2|Key3:Value3"
and parsing these values would be trivial.
Alternatively, you could just format the text inside the string as minimized JSON, which would be a billion times better.
Buenas tardes
Es posible en la lista configurable, saber, o colocar un contador para ver cuantos registros se han agregado.
So I am in need of a configurable list that will allow people to fill in people who can receive something (we need to collect some demographic and internal information) . Each row would represent a client.
The problem I face is that when the data is collected, each submission is put into a single column. Is there any way to make a submission be multiple rows separate everything out?
Thanks for the Guidance.
But whenever I am editing the CUSTOM CSS editor, the "*" mark on the fields are gone. The required feature is working, but "*" mark is not visible.
Can you pls guide me on this?
how do I increase the size of the "Add Row" button? Row height I have increaed to 45px but can't find the css code for the Add Row button.
How can I validate a dropdown list option for configuration list widget? ..For example, the 1st dropdown is "Grade" for which I have 2 options. Now , if I select option 1 from the 1st dropdown, the 2nd dropdown will show 7 items and if I select option 2 from 1st dropdown, the 2nd dropdown will show 3 different items... Please suggest
Hi,
Is there a way to not allow duplicate entries when adding a person?
Such as if a person adds 2 more people using a configurable list then they are not allowed to use the same email?
Appreciate your help on this :)
Thanks
Is there a way to use date "lite"?
I am currently using this as a way to document employees who worked that day. I have one field that has Supervisor, Associate #2, #3, etc. and another field that is a dropdown with names of associates to choose from.
Is it possible to format the rows where the first row by default has Supervisor, if they add a second row it would have "Associate #2" by default and so on.
If that is not possible, can rows be conditioned based on a prior number field? For example, there is a field asking for number of crew members for that shift, if the supervisor selects 10, could 9 additional rows be added automatically?
Thank you
Is it possible to make the dropdown boxes dynamic based on input? For example in the first dropdown box I have species of fish (trout, bass, panfish). The next dropdown box would have size. Is it possible to show different size options if trout is selected (10"-14", 14"-18",18"-22") or if panfish is selected (4"-6", 6"-8", 8"-10")?
Is there a way to add multiple static field names in one columns?
For example:
First Row Label: Medical
Second Row Label: Dental
Third Row Label: Vision
etc..
is there a way to count or calculate how many lines the user adds? i am asking them to record 1-12 different lines (with 3 entries per line)
My date picker is not updating and only showing 2021, any help?
Good morning,
If I have a configurable list how do I get the second window to have a custom list.
for instance.
Utility shirt - sizes 10 - 22
Jacket - sizes 12 - 28
Helmet - white, red, orange
Thanks in advance.
Hi there,
How can I change the size to textarea only?
i would like to use one of the entry number field for calculation, how to use it please support me
how to change how Configurable List Widget input looks like in the Google colander event integration part ? because it looks missed up
Can you do calculations in configurable list? If one parameter is quantity and the other is price, can a third calculate the vale? ie quantity x price = total?
Is possible change the language of the months in date selector?
One more question - can you set a field to display as all capital letters? We need to have teams entering names as all caps and not upper and lower case. thanks!
Hi, we are creating a roster for teams to enter uniform information. Typically, they enter a quantity of "1" - is there a way to pre-populate a field with a set number or text, so they don't have to enter it every single time?
Hola antes que nada agradcer al equipo de jotform, buenisima herramienta.
Tengo una duda, estoy usando lista configurable. Mi duda es si puedo cambiar el nombre a las columnas estoy usando usando el comando static...
Is it possible to create a separate google-sheet row for every new row of this widget? Apparently, all of the rows are appearing in the same cell of the google sheet.
Is it possible that there is a search engine in the drop-down menu?
How I could add 9 elements in a configuration form but not in a row, like making first row having multiple rows itself
Hola tengo un problema cuando agrego un comentario grande, la columna del comentario se alargan mientras las demás se encogen, esto pasa cuando estoy configurando el PDF...
Good Morning,
Really reaping the benefits of JotForm.com. Thank you.
Any chance of enhancing the number field to accept negative numbers? Or is there a configuration feature that I am missing?
Is it possible to get a day of the week in Confiqurable list datefield? Like Mon, Tue, Wed ...
how to disable or make disappear the selected items from the list?
Can you add email as an input option, or allow for a regex against a text entry?
podemos agregar fotos ??
Can we set the current date as default date just like using "now" for current time?
Is there a way that in the configurable list that if you choose from a dropdown list for example shoes it will automatically put the cost of the shoes in the next column.
I would like to use the number of elements entered to make calculations (for example 10 participants at a cost of € 100 per participant, etc .... etc ....). How can I get the number of records inserted?
Can you use this to get a total?
Hello,
Not possible to proceed to field translation using the menu in jotform, why ?
I need it.
Thank you.
Hi I have somehow added a hover text to a configurable list and I have no idea how to remove it. When the form is displayed the hover text appears over one of the form fields and the user is unable to enter a value in the field.
Possible to manage dependent dropdown in this widget ?
Hi, How it is possible to changer month word to translate it in french ?
Thank you.
have to have total of the qty it will solve many problems and more calculation