JotForm User Guide / Advanced Features /

How to Set Up the Configurable List Widget

How to Set Up the Configurable List Widget

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 widget's wizard wand from the form builder:

Widget Settings

We have prepared a table 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 : Enter your name

  • number

    Accepts numbers only.

    {label}:number:{placeholder}

    Example: Age : number : Enter your age

  • textarea

    Accepts more text in paragraphs or narrations.

    {label}:textarea:{placeholder}

    Example: Comments : textarea : Enter your comment

  • A list of options in a drop-down list.

    {label}:dropdown:{option1},{option2},{...}:{placeholder}

    To have one of the options selected by default, just 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: Accept Terms? : radio: Yes, No

  • checkbox

    {label}:checkbox:{option1},{option2},{...}

    Multiple Choice - check off available options.

    Example: Payment : checkbox : Full, Partial

  • 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. 2005-2015. If undefined or invalid, defaults to a range of ten years ago from now to next year from now.

    Example: Date of Arrival : date : m/d/y : 2014-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:

Configurable List - Fields configuration

This is what the configuration will show on your form:

Configurable List - Sample Output

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.

Min/max Rows

To change the buttons' text (add and delete row), set them in the following input boxes:

Label for Add/Remove

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:

Configurable List - Set field as required

Your form users will only be allowed to submit the form if those fields are completed:

Configurable List - Required fields

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.

Custom CSS

And here is an example form. You are welcome to clone or copy the form; take a closer look or modify the form as your own.

The Custom CSS part can look a little too technical - but not to worry - we would love to help - just let us know.

That's all it takes to configure the widget.

If you want to make the Configurable List widget mobile responsive, check this guide: How to Make the Configurable List Widget Mobile Responsive.

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!

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

378 Comments...

See all comments
  • James_Patrick_patrick

    Hi, with 3 dropdown selection, the output is grouped into 1 cell. is it possible to have it as individual rows on excel?

  • 1stM8

    Under my "Pack List - Summerset" pdf form
    I would like under "Units to Ship"
    Instead of Standard Remote on left & list on right, I would like the Standard Remote on top & my list to be across the page e.g.
    Standard REMOTE:
    Dropdown Unit S/N Key Fob S/N PO No. Order No.

    PRO REMOTE:
    Dropdown Unit S/N Key Fob S/N PO No. Order No.
    etc.

  • deannat1967

    I wish instead of having to scroll to the right to see all of the sections it would group them so you can see all of them at once like
    item - size - color - vendor
    cost - shipping - done - ordered
    whatever else - notes

  • karriola

    How do I restrict the number of characters in a text field.

  • rdge

    For a number field, is there a way to require it be greater than Zero? (To prevent end-users from accidently entering zero).

  • WIwebmaster

    Can I have a dropdown list with multiple selections?

  • digiexpert.markdigi

    EU QUERIA QUE UM CAMPO PUXE O OUTRO, TIPO SELECIONO 1 E ELE ME DA OPÇÃO 123, SE EU SELECIONAR 2 ELE ME DA OPÇÃO 456 E ASSIM POR DIANTE, TEM COMO FAZER ISSO?

  • rowena.henery

    Hi,

    How do I use the entries from my configurable list to make a calculation? How do I access the relevant field names?

  • bmitch1

    My organization uses the Configurable List widget to capture multiple event entries for a single participant in our form. Is there any accessible object or output of this widget that tallies the total number of rows added by a participant that we can pass to the Paypal widget to accept payments?

    For example - an entrant who adds 3 rows - should be charged 3x the registration price?

    Thank you!

  • Anilkaul

    Hi
    I am looking to create a section of in a form where we collect past employment history of our employees. Typical employment history will look like:
    Employer Name
    Employer Address
    Start Date
    End Date
    Job Description

    I would like to create an option for the employee to enter as many jobs as they have had. I thought the Customizable-list widget may be appropriate where an employee could add multiple sets of rows as appropriate but I havent been able to get it to work. It wants to add all the info in one row. Is there a way to select several rows of data and make it one object and then have that object be replicated by the user hitting a More button?

  • engaliair

    I have configurable list widget and required calculation of total quantities in the rows entered
    I check all replies and no one said its possible by the configurable widget is there is any other widget can offer same calculations or if JotForm they can provide a specialist to do it for me I don't have any problem to charge me for that

  • john.bello

    I have two fields in my Conditional List widget. How do I get the displayed width of my first field, where the user types in their answer, to be wider? I saw a similar question but the answer was not clear.

  • garg_Komal

    Hi How can we get Unique id for each row we fill

  • jeroenwin

    Hi, all looks very promising and I am very inspired to make what I need with JotForm
    What I am looking for is a dropdown with an option to type in text if the choice is not there

    what s your favourite color?
    blue, yellow, green, other
    And then the possibility to type in an other color...
    Is that possible?

  • dan.bauer

    I want to auto fill the Company/Location data from the top field of the form into the configurable list for each participant entry. This Company/Location data in the configurable list will most likely be the same as the Company/Location data at the top of the form, but may be different, and needs to be editable.

  • jasonrgrammes

    Is there a way to add "Range" to the "Configurable List" widget, just like in the "Time" Element so that it can calculate time. I love this widget because it allows me to specify on a line who/what the time relates to. I am a CDL Instructor, and when taking students out on the road we have to keep track of driving times, and students will rotate out, taking turns. With the ability to add more rows as needed, it works flawlessly, however, the time duration is not calculated, and one of the things I have to keep track of is how much time each student is driving.

    So, in my widget, I have a drop down with a list of all the students. Then a beginning time and the end time. It would be great if I could get a time calculation of each segment, from each row, and total under each prospective student.

  • rdge

    Can you change how large the add-row button is? Physical size of the button and/or font size; as well as the color?

  • KnightSamantha

    How can i make the width of each field bigger?

  • Suporte_Refera

    Would it be possible to put an automatic calculation? For example: One of the fields I created is a value field, I would need the value filled in there to be multiplied automatically by 1.25%.

  • rdge

    How can i make the output columns of the configurable list widget a consistent character length? It is readjusting the column widths based on characters entered into text boxes and makes for a sloppy looking output when multiple lists are used?

    https://form.jotform.com/202893346899171

  • sclouse101

    I copied or cloned the widget as the first field of https://www.jotform.com/build/203397985927172 and configured it to allow a single field / single entry per submission. There are some data already populating the field list. How do you clear or reset the data to a null value in the widget? For instance if we were copying the form to reuse for a new group, we would NOT want the legacy values to carry over to the new instance of the form. We want to force the first submitter to add their name and so on with each new submitter. Submitters will reuse the form and they will ideally select their own names previous entered.

  • psanta

    Hi,

    i wanted to use this in a form with 10 columns of checkboxes. what i want is, when the list loads, all these checkboxes be pre-checked. basically i want to give user the option to uncheck fields, instead of check fields.

    how can i achieve this feature?

  • avanweert

    Is it possible to get a sequential number in front of (or behind) each entry. I'm using Excel VBA to split the information into multiple rows, but I would like to add a sequential number to each row.

  • Moore_Jeff

    This is great and it sucks. Spits the data out as 1 field. You gotta parse it out decode it. So if you have users that complete 10 entries and others that have 50, it makes it difficult to create any sort of structure to generate a workable data log

  • nitkot

    Can I change the date format to dd/mm/yyyy ?

  • lstarkey

    Is there a way to make it so the columns in the list appear as individual columns when viewing/downloading submissions as a spreadsheet? Right now whatever someone enters appears all in one column.

  • khmerrat

    Hi, how can I order the object in field vertically? Could you please advice? Thank you

  • xmlogistica

    Necesitaria que una casilla tenga una lista desplegable y que pueda escribir y vaya prediciendo la opcion que voy escribiendo, sin que sea solo un desplegable selectivo.

  • WataugaArts

    I wanted to use this for artists to enter inventory to bring it to a show or gallery exhibit. When I try to export this data after it has been filled in all the info gets entered into one cell rather separated. Is there a way to export this data so it isn't listed as one answer?

  • ugesavet

    Hello, it's me, again. Why does the drop-down calendar, November 1, show it as Tuesday etc. etc?

    thank you very much again

  • ugesavet

    Another question. Can you reserve multiple dates in google calendar through this widget? It would also be very useful.

    Thanks a lot.

  • ugesavet

    Hello!!
    Hi. I love their forms and their widgets but...
    How to translate months into Spanish?
    Thanks a lot

  • SBVA

    Is there a way we can do the following in the configurable list:

    1. Add an image for "Static" type field. e.g. Image of book along with the name of the book
    2.Can we make row wise computation. e.g. Book Price: Static: $30; Qty : number; Total Cost: number : Book Price * Qty

  • ayhamalani

    HI Can I add a configurable list to PDF ??

  • Emily_Models

    Hi,

    Is it possible to make the columns required if the first one is filled in?

    Thank you

  • rdge

    Can you hide a static text column on the form, but still have it show after submission?

    Form: https://form.jotform.com/202893346899171

    I want the 'Warehouse Part #' and the 'Shipped Quantity' to not show on the form while filling it out, but I need those columns to show up on the form submission. I need this on each of the Configurable List Widgets.

  • rdge

    How do I make the font size of the dropdown list items larger in the Configurable List Widget?

  • kkimmmccruz

    Hi, How do I get to connect this with my inventory data?

    For example: customer can only add up to certain amount of number depending on my actual inventory of the item they wish to purchase?

  • rdge

    Can you make the font size of the options in a dropdown box larger?

  • jdimiceli.cffc

    Can you make the Calendar do Month/Year and exclude the day?

  • kenton.c.keller

    How do i change the length of fields in a configurable list? i would like them to fit on one row.
    thanks.

  • Administration2015

    Hi, anyway to remove the "Label for Remove" ?

    I want to set it as "cannot remove once you added".

    Thank you.

  • mhermest

    I don't see a tab for "Custom CSS"

  • kitshoporrfc

    When a user fills in the radio check boxes ive set up - it won't let them uncheck them if they have made a mistake - what do i need to do to change this

  • maanuellfernando

    Poderia ter uma opção de adicionar os dados em diferentes colunas na hora de exportar com Excel :D (se já for possível fazer isso, me avise por favor!)

  • civesnhada

    Is there a way to have hint text show on hover?

  • dscott001

    Hello, the widget does not automatically adjust the remaining columns to the width of the form. I am removing and customizing the columns, but noticed that the size of the columns remains constant and does not automatically adjust to the width of the form. Can you assist?

  • jon.garza34

    Is it possible to create a break in the coding so that everything isn't on just one line?

    Example:
    Line 1 would be radio A and radio B
    Line 2 would be text field A and text field B

    Thank you.

  • AGHF

    How do I change font colour? Need it to match rest of the form

  • mohammadaslam

    how the answer or output look like in excel?