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:
211 Comments:
3 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?
3 days ago
Hello,
With the "Configurable List widget", how can I put thousands format in the numeric field?
Thank you,
14 days ago
It will be possible to add an additional bottom to “duplicaré register” ?
18 days ago
Hi.!
Is it possible to automatically add an number for each new row? The objective is to automatically number the rows
19 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.
20 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?
25 days ago
how can i make the entry field smaller to fit the answers
with CSS code ?
26 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!
28 days ago
Is it possible to limit the number of lines to a previous field? We are asking people to list how many people are in their party, and then add each person's name and age on a separate line. If they write they have 3, we want to limit the number of lines to 3. Is it possible?
32 days ago
Hello, we would like to know if we can hide/unhide a column/list when we use the Jotform PDF Editor, for example the user can answer 5 column/list (Name, Dropdown, Date, Time, and Text) but in the PDF editor we only want to see the Name, Dropdown, Date. This is mostly to save space when viewing into PDF editor
34 days ago
Hello can you mix different fields? For example can you put a check list field and add a tex field in the same text? Or can you add multiple text or text area responses?
36 days ago
Este widget deberia ser configurable en condiciones y en valores e calculo
41 days ago
its possible to attach document feild
53 days ago
Is it possible to limit the number of lines to a previous field? We are asking people to list how many people are in their party, and then add each person's name and age on a separate line. If they write they have 3, we want to limit the number of lines to 3. Is it possible?
61 days ago
Como configurar para agregar en formato numero de teléfono?
61 days ago
How to disable the add row button?
62 days ago
seria de mucha ayuda que se pueda agregar un campo foto para cada linea que se agregue, esto es muy util cuando se estan llenando datos y se requiere una evidencia fotografica por cada linea de datos
64 days ago
Can we add up all the lines, then use that number to calculate payments due?
Example: I add 3 guests. I would like to multiply '3' with $50 (cost of event) = $150.
Then use that figure to populate payment widget (user defined amount)?
67 days ago
Are you able to calculate in the table?
72 days ago
Buenos dias, ¿Existe alguna manera de configurar la lista configurable en un formulario para que uno de ellos ocupe toda una fila mientras que los demás permanezcan en una sola fila compartida?...
72 days ago
how can I remove the wheel/scroll feature for NUMBER on the configurable list? We'd like users to type in a number without the option of it scrolling through numbers.
74 days ago
How to change the styling for the +Add button on the Configurable List Widget?
Font, font color, background color, hover & press colors, etc.
74 days ago
Buenos días, como puedo hacer cuando el número de opciones del campo dropdown son muchas (+100)...?
podría crear el campo dropdown fuera de este widget y colocar las opciones que son muchas y luego hacer un llamado a este campo con CSS dentro del este widget...? Gracias
76 days ago
How i can change the background color of "Add" button with css?
80 days ago
Can you provide a CSS script to make the first field in a row a different static text option...