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
To use the Configurable List widget
- In the Form Builder, select Add Form Element in the upper-left corner.
- In Form Elements, go to Widgets at the top.
- Search and select Configurable List.
- Configure your fields in Widget Settings.
Here’s the list and syntax of supported field types that you can use in your dynamic list. Separate each field declaration with a line break:
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:
236 Comments:
5 days ago
1. Currently I have 3 fields on one line, how can I separate into 2 field: one line name and first name and another field birthday on a second line ?
2. For date field, can we have like a title of the field like Day Month Year on top or inside?
3. Additionally for the year option it is show currently the last 10 years (ascending order from 2015 to 2025, but it would be better for us the descending order) can we have descending order for like the past 15 years ?
7 days ago
Hello, how do you force a field onto the next row like in the Pizza order sample above. I am interested in having a start date field and an end date field on one row with a notes field below it. I also want each "add row" to be auto numbered. I found the auto number css below, but the force new row answer links to an error page. Thanks.
11 days ago
Hi how i like the widget to show 3 columns and say 4-5 rows of the same dropdown field type. How can I do that?
11 days ago
Instead of using a static list, do you have a dynamic option that allows me to map my list? Similarly, instead of a static dropdown, do you offer a dynamic dropdown that can map a list
12 days ago
To perform a calculation, I need to determine the number of rows in the configurable list. For instance, if the customer fills out 3 rows, I want to multiply the total row count by a fixed value of 10, resulting in an output of 30 displayed in another text field.
12 days ago
How can I get the count of the list items as a number?
13 days ago
Hi, I'm trying to modify the CSS code of a configurable list to put the 10 options of a checkbox on two lines. Currently, my choices are vertical (1 column x 10 lines), but I would like to place it horizontally (5 columns X 2 lines)?...
14 days ago
can you add a calculation column in a configurable list widget? if I have quantity and unit price, can I add a another field/column to multiply the quantity by unit price?
16 days ago
How can I pull a dropdown list from a table in Jotform? I need to select the column with a data range to be the dropdown list. And the second field should be auto-filled by the corresponding column. For example, when I select a specific cell in the dropdown list, it automatically fills in the cell next to it in the table.
22 days ago
I'd like to copy a text value from above into the first text box for each row in the configurable list. Please advise how to do this. Thanks!
33 days ago
Que otro Widget es similar al uso de ""Widget de Lista Configurable" que me permita crear varios campos o trabajar como un excel dentro de un formulario?
33 days ago
estoy utilizando el "Widget de Lista Configurable" , en un formulario, quisiera si es posible que al escribir un codigo ya existente en lo q' llevo guardado en el formulario, si coincide el numero me llene los demas campos...!! una especie de autocompletar,!! si un dato coincide.
ej. la lista configurable tiene campo de codigo, nombre, tel, email
si ya llevo varios archivos guardados, y escribo el codigo, me lo identifique que ya existe y me rellene los campos con lo ya archivado.
Es posible hacerlo ?
34 days ago
Revising my previous question:
How can we place a Remove icon for unwanted line that was added with a form that's 5 columns already and fitting on a single line?
It seems to work when you toggle OFF fitting on single line.
Can we make the table horizontally scrollable on a mobile device as well?
34 days ago
How can we place a Remove icon for unwanted line that was added?
40 days ago
Inside my configurable list half of my fields are required while the other half are optional. If the user does not complete one of the required fields, the list does not give an indication as to which of the fields is causing this issue. I understand this is because the configurable list itself is the field that is incomplete. However, this user experience is challenging to some users who have added multiple groups and have unknowingly skipped a required field in the list. Is there any way to indicate to the user which field inside of the configurable list needs to be completed?
43 days ago
How do I force a new row?
49 days ago
For Configurable List... can the dropdown list include a blank/other option that the user can fill in if the pre-defined list items aren't suitable?
50 days ago
Is there a way to set a condition to copy the contents of a configurable list to another configurable list? For example I have a configurable list for present address then I have a check box to copy the contents of the present address and add it to the permanent address and disable it
62 days ago
Hi can i also add a field where i can upload and show a picture in the list?
Basically what i am looking is that i have a text input field on the left and a picture upload on the right.
Thx
62 days ago
can we add calculations colum like total
62 days ago
The required field feature does not make sense here.
I am trying to ensure a user enters the required fields in the row before they click "ADD". That doesn't seem to exist.
Now there are 2 features for required field. One at the usual General configuration and again on the widget configuration. However none of them help me in getting fields required before being added.
Any help here
70 days ago
I don't see a way to have PM be the default selection for the 12hr setting. Thank you!
93 days ago
How to adjust its width?
95 days ago
How can I get the count of the list items as a number?
118 days ago
Is there a way to add an address section into this widget?