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 its 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: 

          • 1. The Widget dynamically adds a set of fields on your form as a list
          • 2. You can add as many rows as possible
          • 3. You can define the type of data or information that can be collected for each dynamically added row on the list
          • 4. To restrict the type of information that can be collected, you need to define field types
                • 5. The following field types are allowed in the configuration for each row on the dynamic list:
-Text
-Number
-Text Area
-Date
-Time
-Drop Down
-Check Box
-Radio Buttons
-Static - Display a Message or Text

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:


We have prepared a Table that will guide you in setting up your dynamic list through this widget: 

Lets begin with the List Field Configuration: 



Field Type

What it Does

Field Configuration - How to add this field as part of the list with available options

Example

Text

Accepts plain text

Field Label:text : Hint Text

Name:text

Number

Accepts Numbers only

Field Label:number

Age:number

Text Area

Accepts more Text in paragraphs or narrations 

Field Label: textarea : Hint Text

Comments : textarea : Hint Text

CheckBox

Check off available options

Field Label: checkbox: option 1, option 2, option 3

Payment: checkbox: Full, Partial

Radio Buttons

Select one of the available options

Field Label: radio: option 1, option 2, option 3

Accept Terms? : radio: Yes, No

DropDown

A list of Options in a Drop Down List

Field Label: dropdown : Option 1, Option 2, Option 3, Option 4 : Hint Text

To have one of the options selected by default, just replace it with one of the options on your list, for instance: 

Field Label: dropdown : Option 1, Option 2, Option 3, Option 4 : Option 2

Where Option 2 Will be selected by default when the form is opened. 

Title: dropdown: Mr, Mrs, Miss, Dr, Prof. : Select One

Date

A Date Selector with a pop - out calendar

Field Label: date : m/d/y : 2014 - 2034

If the date format is undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish

Years' range - 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

Date of Arrival: date:m/d/y:2014-2020

Time

A Time Selector

Time: time:12

Time format - allowed values are 12 (with AM/PM selector) and 24. 

If undefined or invalid, it Defaults to 12.

To Set Default Time, add " ,now" to config. i.e., 

Arrival Time: time : 12, now

Arrival Time: time : 12, now

Static

Display some Text

Field Label: static: The text you want to display

Important Message: static : Click on the '+' button to add a new row.





The Table above looks a little scary, however, its 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


To Limit the number of rows that will be added on your form, enter the number in the Maximum Rows Number input Box. 

To automatically load the first row (or more),  enter the number in the Minimum Rows Input Box. 

To change the buttons text (add row and delete row), you can define it 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 non-optional fields, you need to set the field as 'required'

To complete this setting, all you need to do is add 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. 




And here is an example form: http://form.myjotform.com/form/41112368425549 

You are welcome to clone/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

352 Comments...

See all comments
  • 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?

  • SUPPORT_HELPDESK

    This widget may limit the accessibility of your form.
    Users with impairments may have trouble filling out your form

    >> what is this mean?

  • ashtonjose

    I've got a small egg business in which I use an order form and I have delivery days such as Mon,Tue,etc. I was wondering if there's a way to automatically hide or display a text saying unavailable next to one of the days. So when a customer orders some eggs, other people can't order eggs on that particular day, because I only get 12 eggs a day.

  • dtheo

    You can enter decimal numbers in the configurable list - such 12.33. But when you use the Form Calculation widget it will not work unless the numbers do not contain decimals. Trying to use the configurable list for a reimbursement voucher that has dropdown of account, description and the amount requested. It will calculate only if numbers do not contain decimals. How can I make it recognize numbers with decimals?

  • yuliana.devita

    Hi..
    Iwant to delete the add button, how can i do that?
    thanks

  • EM3

    Hi, I'm trying to use the configurable list in a form but it doesn't seem to be working. I'm making changes in the fields configuration but the changes don't apply to the widget, despite that I'm updating it.

  • ResidencialGenesisFlat

    como faço para configurar o tamanho de cada campo no widget LISTA CONFIGURÁVEL ? quero reduzir o tamanho do campo e não sei como fazer.

    Marca:text : Hint Text: Fabricante
    Modelo/Tipo:text : Hint Text: Tipo/Versão
    Ano/Modelo:text : Hint Text: Ano/Modelo
    Cor: Hint Text
    Placas:text : Hint Text: AAA-000
    Quitado? Valor da Prestação?:text : Hint Text: R$
    Número de parcelas pagas e que faltam para quitar:text : Hint Text: Quitadas / A quitar

  • benlifemis.com.ph

    Can I link the configurable list widgets to the pdf editor?

  • joelmeine

    Like the native Date Picker form field, where in it's Properties and the tab Limits and the setting for "Past & Future", I need this same setting to be available for the Date field in this Configurable List Widget object. Thanks!

  • Green_Louise

    Can you specify that a field is classified as text only so it is not added in a subsequent calculated field

  • yavuzselcan

    Hi,
    How can I add "Other" text field for the dropdown? I want to add "Other" option into the dropdown menu and get the details instead of "Other" with a text area.
    Thanks

  • MarianaCCForm

    Good day, is it possible to put a entry limit to the number of letters they use in a textarea?

  • Camila_Zambrano

    Hello! it is possible to have in the 1 column a checbox list with diferent text per row and in the 2 column a date and in the 3 column a drowdown list?

    I hope you can understandme my english is not really good!
    Nice Day,

  • houndandbone

    Hello,

    Is there a way to stop the Quantity field from being able to display negative numbers?
    Thank you!

  • Aalgse

    The configurable list cannot be disabled via conditions whilst other fields can, please correct this ability to align with the disable condition rules (and make it a general abiliy/requirement of any widget/field implemented. thankyou

  • wamco_reg

    Hi, how can i add some javascript to the widget? For example, to enable some calculations etc. when a field in the widget changes. And can a class value be added to the fields with an auto increment with each row like -. This could help in doing some javascript activities.

    Thank you

  • HuttonSafetyGroup

    Do you think it'd be possible for you guys to develop an "add photo" upload? For example, we complete inspections and right now the inspection columns on the configurable list are just "list the defect, give notes, etc." but I'd love to be able to have a "Take Photo" option relating to that row on the configurable list. Because then they can add as many defects or lines as possible.

    Thanks for considering it!

  • citylock

    anyway to remove the " Label for Add " and the "Label for Remove" I don't want the user to be able to add or remove anything

  • sbitforms

    Can I define the width of the text columns? Defining the width of the whole widget in CSS only seems to influence the width of a checkbox column (and maybe radio button column, but I do not use that one)

  • acgofamericas

    Is there a way of creating a dynamic field, that starts woith Number 1, and as the user adds the (+ Row), the additional Row, shows now the Number 2? To identify the number of rows automatically

  • phoenixsolarsa

    Hi.

    Is there a way to do away with the 'add row' button in the Configurable List Widget?

  • pricelesspendantz585

    CAN YOU CHANGE THE COLOR OF THE WORDS IN A WIDGET

  • cpdoperation

    Hi, i'm trying to use this menu, on the form builder is quite easy, but is there any way to download the result into CSV or Excel, becasue it's lump up into 1 cell for all instead of 1 cell for each so its difficult to compile

  • anitta.b.media

    Hi, Im using this as a set menu option (one configurable line only). Each set menu is $3. How can I set a value to this widget = 3 if the checkbox in the first column is selected? This is so i can calculate total order amount at the end of the form.

    https://www.jotform.com/build/200993255864464?iak=70bddc1c1e40df866d20327693700f20-692e08f7e3e22c4b

  • GeorgSoller

    hi, ist ist possible zu fill the ist row by URL?

    like this: https://form.jotform.com/GeorgSoller/XYZ...

  • BoldVenture

    Is there a method of hiding the field name in the configurable?

    Instead of Author: Mike Smith; Title: "Name of Story" ...

    I'd like to get it into excel as:
    Mike Smith; "Title of Story"

  • FosterJames

    Is there a way to do an email and phone number input mask in the text or number fields?

  • Jorgia

    The configurable list won't let me make certain fields in the list required as you've mentioned above. I've done this before and it worked just fine - but when I'm doing this in the form I've listed, their red asterisks won't appear. What am I doing wrong?

  • cnbcf

    Is there a way to display month description in other language instead of english one in date type fields? As alternative, could be displayed just numbers. (Ex.: 01/01/2020)