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:
228 Comments:
1 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.
7 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!
18 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?
18 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 ?
19 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?
19 days ago
How can we place a Remove icon for unwanted line that was added?
26 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?
28 days ago
How do I force a new row?
34 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?
35 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
47 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
48 days ago
can we add calculations colum like total
48 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
55 days ago
I don't see a way to have PM be the default selection for the 12hr setting. Thank you!
78 days ago
How to adjust its width?
80 days ago
How can I get the count of the list items as a number?
103 days ago
Is there a way to add an address section into this widget?
110 days ago
Hello
I made a form using the "Configurable List Widget" and used some fields for name and email. I needed to create a way to send responses by email to the emails registered in this field, but for some reason it doesn't work, I imagine that when adding the recipient, it understands the entire question field as a single recipient.
Would you know how to get around this problem, if it is possible to make only a specific text box in this widget read as a recipient?
110 days ago
Hello,
With the "Configurable List widget", how can I put thousands format in the numeric field?
Thank you,
120 days ago
It will be possible to add an additional bottom to “duplicaré register” ?
124 days ago
Hi.!
Is it possible to automatically add an number for each new row? The objective is to automatically number the rows
126 days ago
When emailing a submission, could a field/column not be listed when all of its rows are blank with no data? That would allow the other fields/columns with data to be wider and possibly avoid the field's data wrapping onto two lines.
126 days ago
Hello! Is it possible to add options dynamically? Let's say I have a checkbox I want to populate with options based on other fields' responses, is there a way to add those to a checkbox inside the configurable list?
132 days ago
how can i make the entry field smaller to fit the answers
with CSS code ?
132 days ago
Hello! Is it possible to export all the information to Google Sheets in separate columns and not all in the same column/row? Even better if they can be exported to columns that have already been established by the previous questions in the sheet.
For example: a father is filling in the form for his family. He writes his full name in the first question. When he is filling in the configurable list with the kid's full names, can that data be sent directly into a single 'Full Name' column in Google Sheets? Thank you!