Overview
The Configurable List widget requires a little more to set up, but it’s not hard at all. There are a few things we need to consider in order to understand how it works and get the widget up and running:
- The Widget dynamically adds a set of fields on your form as a list
- You can add as many rows as possible
- You can define the type of data or information that can be collected for each dynamically added row on the list
- To restrict the type of information that can be collected, you need to define field types
The following field types are allowed in the configuration for each row on the dynamic list:
How to Configure the Widget
The configuration dialog opens when you add the widget to your form. You can always access it by clicking the element’s Wiget Settings (wand) icon in the Form Builder.
We have prepared a list that will guide you in setting up your dynamic list through this widget. Let’s begin with the list of field configurations.
Field Types
text
Accepts plain text.
{label}:text:{placeholder}Example:
- 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: from 1 to 10: 1, 1, 10
textarea
Accepts more text in paragraphs or narrations.
{label}:textarea:{placeholder}Example: 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 the {placeholder} with one of the options on your list.
Example: Fruits: dropdown: Apple, Banana, Mango, Orange: Banana
radio
Single Choice (radio button) – select one of the available options.
{label}:radio:{option1},{option2},{...}Example: Size: radio: Small, Medium, Large
checkbox
Multiple Choice – check off available options.
{label}:checkbox:{option1},{option2},{...}Example: Addons: checkbox: Eggs, Salad, Fries
date
A date selector with a pop-out calendar.
{label}:date:{format}:{range}If the date {format} is undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish.
The year {range} is formatted as start-end, e.g. 2015-2025. If undefined or invalid, defaults to a range of ten years ago from now to next year from now.
Example: Date of Birth: date: m/d/y: 2000-2020
time
A time selector.
{label}:time:{format}[,now]The allowed {format} values are 12 (with AM/PM selector) and 24. If undefined or invalid, it defaults to 12.
To set the current time as default time, append “,now” to the config.
Example: Arrival Time: time: 12, now
static
Display a message or text.
{label}:static:{text}Example: Important Message: static: Click on the ‘+’ button to add a new row.
The list above looks a little scary, however, it’s quite easy. Here is a sample configuration:
This is what the configuration will show on your form:
After completing each field configuration, hit the return (enter) key to add a new field configuration on a different line so that the widget can treat it as a new field setting.
Other Configurations
Enter the number in the Maximal rows number input box to limit the number of rows that will be added to your form.
To automatically load a number of rows, enter the number in the Minimal rows number field.
To change the buttons’ text (add and delete row), set them in the following input boxes:
Set a Field or Input as “Required”
In most forms, some fields should not be skipped, like names and email fields. To prevent the form user from skipping these mandatory fields, you need to set the field as required by adding an asterisk (*) before the field configuration as shown below:
Your form users will only be allowed to submit the form if those fields are completed:
Change How the List Looks
Its 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 custom CSS.
The Custom CSS part can look a little too technical – but not to worry – we would love to help – just let us know.
If you want to make the Configurable List widget mobile responsive, check out the guide on “How to Make the Configurable List Widget Mobile Responsive”.
That’s all it takes to configure the widget.
We would love to hear what you think, or share your experience so that we can continually improve the tools that make your form awesome!
Send Comment:
37 Comments:
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: Y las columnas me aparecen
1
1
1
Me gustaría aparecieran así:
1
2
3
4
5
¿cómo lo puedo hacer? Gracias
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, ejemplo:
I comentarios I nom
I bre
Icopl
I to
____________________________________________________
comentario grande en la tabla I jai
I me
como puedo corregir esto en 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