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:
273 Comments:
3 days ago
No meu, não aparece o campo de CUSTOM CSS
8 days ago
How can I allow the element to expand beyond 1000px? It currently stops growing at that width.
16 days ago
How can I include an escape operator for commas, such that when I create a dropdown menu, I could include values that contain commas, and not separate them as options?
23 days ago
Can this be used with images? I.e. add an image to the row, or a selection of photos using take photo?
28 days ago
Can someone recommend a CSS code to change the color of the "add" button? With the default being gray, respondents think it is inaccessible (of course they don't try first).
43 days ago
When clicking on the wand, it opens "widget settings", but I only see "General", "CSS" is missing as an option. How do I find it?
60 days ago
The custom CSS is hidden for me, i need to pay this ?
64 days ago
I just want to create Diesel Generators log book daily wise start time and stop time entry n nos of generator sets can you suggest any form which integration with google sheet
85 days ago
This is absolutely great - but how do you then get to analyse that data. It shows only in one field on the report. I need to report on each set of the data collected in my report (so for eg. if a staff member undertakes 10 jobs in a day, then the report on them will show 10 lines of data under each of those subheadings within the configurable list). I can not get it to do this!
92 days ago
Hello,
Is it possible to perform calculations within this element so that the first column can be added to or subtracted from the second column, or have the result displayed in a separate column?
93 days ago
How do I make it so it's only 1 field per row? It would be amazing having simple CSS codes for simple stuff like that on this help article. Thanks!
98 days ago
How can the data from one row in this widget be separated out in the Jotform table so it's not all included in one cell?
99 days ago
Is there an upload option?
101 days ago
I am using the field Number. However, it is allowing me to enter only integers. How should I do if I want to enter decimals?
104 days ago
Hi, what is the CSS to move some or each field to a new row so it is not so squashed? I have 7 fields, but they are on 2 lines and it doesn't look very user friendly.
112 days ago
Doesn't seem to apply to Smart PDF setups....no form fields are generated to add to the PDF, like with the basic widgets (Short Text, Long Text, etc.)
113 days ago
hola, existe la manera de agregar otra opcion, si alguna opcion no esta en la lista el usuario pueda agregar otra opcion
121 days ago
I'm using this option for multiple registrants on a form. Is there a way to send email confirmations to each email address on the configurable list?
121 days ago
Is there a way to make sure a number selected can only be positive?
127 days ago
Is it possible to specify a default value for a radio button? That is, that one of the radio buttons is initially selected?
128 days ago
Hello, can I make Uppercase transform in a name area and numbers only for number file ?
143 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?
145 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.
145 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?
145 days ago
Hi, i wan to force some fileds to second row, how can i make it