How to Set Up the Configurable List Widget

Last Update: September 24, 2015



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. Here is a sample CSS configuration and how it makes the list look: 
How the form looks now after adding the CSS:


And here is the actual 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. 

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! 


91 Comments...


   
swapna_summit (July 09, 2014 at 03:49 AM)

How to make a textbox as an email vallidation

View Answer


   
FunglobalACT (July 17, 2014 at 06:04 PM)

Error... Problems in widget.
Please solve bug.

View Answer


   
richt74 (July 18, 2014 at 09:19 AM)

Hi is it possible to add an upload image input

View Answer


   
philaiellomarketing (July 30, 2014 at 05:20 PM)

the text box looks a little "short" is there a way to edit the height? also add a little bit of spacing between columns?

View Answer


   
braavos (August 18, 2014 at 01:52 PM)

Hi, how can I translate the date to portuguese, please? Thanks!

View Answer


   
noli414 (August 25, 2014 at 02:33 PM)

What rickt74 said. It would be perfect if you could do that. I have been looking for something like this for awhile. If you could see image that would be even better, but filename path is sufficient. Please let us know if you add!

View Answer


   
felmiranda (August 28, 2014 at 10:36 AM)

Im having problems with the data once downloaded. Very hard to work out to do some analysis. Each entry stays within a column, including titles. Is there any way to fix this?. It would be very valuable.

Thanks.

View Answer


   
michaeloucks (September 06, 2014 at 12:34 AM)

How do you add a time stamp. I would like for every time I create a new list a time stamp is shown.

View Answer


   
OregonAITC (September 08, 2014 at 05:40 PM)

Is there any way to make the date at least a week out?

View Answer


   
jamesforpm (September 09, 2014 at 09:11 PM)

Is there a way to include data captured in this widget in conditions? For example, I have a number column called 'Hours' and I want to do a calculation based on the hours entered.

View Answer


   
kolumbanbotond (September 12, 2014 at 03:40 AM)

Can I make price calculations with this?

View Answer


   
bimchk (September 19, 2014 at 06:52 PM)

How to add multiple options?

View Answer


   
phorest (September 24, 2014 at 10:34 AM)

Thanks, this is a great feature.


   
Ray (September 27, 2014 at 06:58 PM)

I'm having trouble adjusting the width of my second textbox.

I have two textboxes, but only wish for the second to have an increased width.

So far I have tried .col1 {
width: 600;
}

but it only seems to change the width of the space, rather than the actual textbox...

View Answer


   
IEHA (October 10, 2014 at 11:40 AM)

How do I add decimal places to the "number" field type?

Great feature by the way.

View Answer


   
rafdn83 (October 13, 2014 at 10:00 AM)

how can limit text area to 200 character?

View Answer


   
leoncxw (October 15, 2014 at 08:22 PM)

How do I make it mobile responsive to the size of the window/ screen ? Please help.

I lined up 1 long line of fields and when i preview it, it cuts off halfway! My "remove entry" button gets cut off too! I can't scroll the window horizontally too.

How do I make it responsive so that it lines up nicely and not get cut off halfway ?

View Answer


   
browningreagle (October 17, 2014 at 01:25 PM)

My form has two Configurable List Widgets, but one of them has an issue. No matter what I seem to do, the right edge of the Remove button is always cut off. The combination of fields I have are text, date, text, dropdown, checkbox (in that order). My first widget actually is so long that it extends outside of the white workspace, and the Remove button(s) are all visible and comlete. No matter how much I shorten the problem widget though, the right edge is always cut off. Please help! Thank you!

View Answer


   
browningreagle (October 20, 2014 at 03:28 PM)

Is it possible to get the Add and Remove buttons to match the style/look of the Submit button?

View Answer


   
lmrttn (October 30, 2014 at 05:25 AM)

I'm getting a "502 Bad Gateway cloudflare-nginx" error. The form worked fine until yesterday. How can I solve this?

http://www.jotformeu.com/form/42571946002350

2nd page

View Answer


   
tfsforms (November 06, 2014 at 11:30 AM)

Is there a way to change the maximum rows for the list dynamically? That is, I would like for the user to specify a number of rows and then have the form change the maximum number of rows based on the user's input. Actually I would like to change the minimum number of rows to this value as well so that the list will show the exact number of entries required.

View Answer


   
contactus@ckestates.co.uk (November 06, 2014 at 04:38 PM)

HI, Why does this widget not display online when it has been updated ? works fine inside jotform - tested in chrome and IE cleared my cache, cleared history etc. refreshed browsers and still does not appear - PLEASE HELP - sure its something obvious just seem to be missing it :-

View Answer


   
Nadine (November 10, 2014 at 10:33 AM)

Awesome site, but I would like to incorporate a matrix in the configurable list. I would like the user to input a task in the first column, and then have a series of checkboxes where they will check when they performed the task (3 months before the event, 2 months, etc.). They can add as many events as necessary. Can this be done?

View Answer


   
itchai (November 22, 2014 at 01:22 PM)

Hi,
This looks like a very useful tool. I would like to know if there is a way to make the first column a counter - to automatically put a number starting at 1, then 2, etc. for each row that the user wants to add. The field wouldn't be interactive (the user couldn't change it), but it will give the total number of rows that he puts in.
Thanks

View Answer


   
bishopsjot (December 11, 2014 at 12:51 PM)

How do you remove the listing of the type of field? For example my fields show "text" in each text box but I would rather just hid that. Thanks!

View Answer


   
suzanabueno (December 22, 2014 at 05:00 PM)

Can I translate the form to other languages? I'm seeing only an option to translate the title.

View Answer


   
iannel (December 27, 2014 at 01:45 AM)

Hi there, is there a way via CSS to set the colour of each Dropdown option in a column? So Option 1=Blue, Option 2=Red etc. I am using this setup:

Name of group : dropdown : Group_1, Group_2, Group_3 : Please Select

View Answer


   
guineapigme (December 27, 2014 at 05:33 PM)

How can I make a textbox field wider ... I have very few columns in my list and would like to make them wider

View Answer


   
saltadministration (December 29, 2014 at 02:52 PM)

anyway to include only the day/month and exclude the year?

View Answer


   
saltadministration (December 30, 2014 at 12:11 PM)

More questions. How can I get the label/question to not be bold? I know how to change the font, but not the style. Also, Is there a way to change the font for the hint text? Even thought I changed the font family, this does not appear to change the hint text for the textarea.

Thanks!

View Answer


   
callibee (December 30, 2014 at 11:37 PM)

How can I change the configuration list font color from the default black color?

View Answer


   
acpevans (January 05, 2015 at 01:55 AM)

Is there a way to add a "file upload" button as a field option?

View Answer


   
wallace.stevens (January 08, 2015 at 08:37 AM)

Is there a way to make it for the date field to where a user only puts the month and year? And/or is there a way to customize the column widths individually instead of having them all the same size?

Thanks so much

Here's the link to my form I am working on.

http://www.jotform.com//?formID=50065349354152

View Answer


   
sfields (January 21, 2015 at 01:56 PM)

Is there a way to make the date fields smaller? Maybe just displaying "MM/DD/YYYY".

View Answer


   
martinbond (February 02, 2015 at 04:48 AM)

Please can someone help with the following:

1, insert new static text for each row?

2, change individual column sizes.

Thanks in advance.

Regards,

Martin


View Answer


   
LRGR (February 02, 2015 at 04:37 PM)

Is there a way to make a field show/hide. Example if they check yes then a new field shows up? If they check no then the field is hidden?

View Answer


   
LRGR (February 06, 2015 at 01:19 PM)

Hello,

I have two checkboxes in the configurable widget and it doesn't seem to be coming through on the submission on which box they are checking.

Thanks

View Answer


   
gymnasticsvictoria (February 08, 2015 at 06:21 PM)

When I complete a test run of my forms the data entered entered into the configurable list doesn't show up the submission.

I have used this widget in multiple forms (which I cloned) and none of them are working.

I have changed the widget from required to unrequired and it doesn't seem to make a difference.

This is the source code of my form

View Answer


   
gymnasticsvictoria (February 08, 2015 at 07:32 PM)

I just tried to edit a test form I filled out and the configuration tables are empty???

Do you have any recommendations. I don't know why that information is not saving.

View Answer


   
gymnasticsvictoria (February 08, 2015 at 09:02 PM)

In regards to my above comment. It's only an issue using Google Chrome. It is not a n issue with Internet Explorer or Mozilla Firefox.

View Answer


   
David Ortega (March 09, 2015 at 11:30 AM)

Hi, Is there a way to add quantities values.

this is my form http://form.jotformz.com/form/50645039859667

and I want to add up the quantity of tshirts and then subtract from the total

View Answer


   
zimmerfrei (March 28, 2015 at 10:33 AM)

Great Widget. But is there a way to spread the required fields over several lines rather than only one? The data i ask the user to fill in doesn't fit in just one row. I tried the custom CSS options, but actually i don't know jack about CSS programming.

View Answer


   
ebomb321 (April 13, 2015 at 03:06 PM)

Hi,

we would like a radio button displayed on each row, but only clickable on one.

is this possible?

thanks!

View Answer


   
bimchk (May 05, 2015 at 10:38 PM)

When I am creating pdf form the Configurable List is not seen in pdf form. While it is working fine in online form. Please fix this problem.

View Answer


   
chswecke (June 05, 2015 at 05:13 PM)

How can I change the width of a text box in the widget?

View Answer


   
dbrady3300 (June 08, 2015 at 10:00 AM)

Is there any way I can display different static text for each row, without having to create a separate configurable list? (so that they can act as row labels)

View Answer


   
andrew184 (June 23, 2015 at 04:16 PM)

The configurable list seems to be what I want to use, but I have too many fields to fit on one line.
I can see that the fields don't wrap to the next line.

I tried setting up 2 configurable lists with a condition set up to show the second list.. but that only works if there's only one entry.

(I'm creating a job application and trying to create a section for Previous Employment details—company name, city, dates of employ, job title, etc.)

Ideally, I would like to be able to have these 7 fields together (with multiple fields on a line) and then allow the applicant to click to add another record...

Is this something that can be accomplished using the configurable list? or perhaps another solution is plausible?

View Answer


   
brewha51 (June 23, 2015 at 10:16 PM)

How do you make each text box on a seperate row. I'd like to have a drop down box on the 1st row, a text field in the 2nd row, and a text area on the 3rd field?

Thanks,

View Answer


   
starcresc (June 25, 2015 at 09:42 PM)

It doesn't allow media queries in the custom CSS fields! Help! This SHOULD be a solution to everyones problem but it doesn't work
@media screen and (max-width: 300px) {
td {
display: block;}
}

View Answer


   
mgsgaliza (July 11, 2015 at 07:21 AM)

How can I translate the warning message of the Configurable List Widget? I have translated the warnings of the hole form, but I cannot do this in the widget. Is there any solution?

View Answer


   
GandSEandW (July 23, 2015 at 11:53 AM)

I need to know if I can condition a textbox with an if/then function. For example, if someone selects a certain option from a drop down then it makes the next field a required field. If they don't select that option than the next field is not required. Thank you

View Answer


   
theadnanc (August 07, 2015 at 09:04 AM)

Is there a way to remove the add button from the list? I do not want them to be able to dynamically add the number of entries

View Answer


   
rluqui (August 22, 2015 at 06:07 PM)

No puedo ver la tabla en la vista previa. Alguien me puede ayudar con eso?

View Answer


   
rluqui (August 22, 2015 at 06:08 PM)

I can not see the table in the preview. Can someone help me with that?

View Answer


   
ChessGuru (August 25, 2015 at 08:05 AM)

How can I restrict the date range more than just in years?

I want to limit the date selection to only September 21-25, 2015.

Can I use minDate: maxDate: somewhere in the css or html?

Thanks.

View Answer


   
Gauravsomwanshi (August 26, 2015 at 11:45 AM)

how to put smooth signature widget and save button in every row

View Answer


   
CaioFilho (September 07, 2015 at 02:44 PM)

How to turn it mobile responsive??

View Answer


   
ggsstarvending (September 27, 2015 at 08:06 AM)

ID Users access can add entries.
if not given User ID they can not upload the form to our staff.

Is this possible???

View Answer


   
arthurchee72 (November 03, 2015 at 04:32 AM)

I need to translate the labels of the fields within the widget to other languages.
How can I do that ?

View Answer


   
afriedges (November 03, 2015 at 01:30 PM)

I want to have the option of selecting multiple options in a dropdown list. How do I go about this?

View Answer


   
sswacus (November 19, 2015 at 09:57 AM)

Can the field validaiton be expanded upon, for example the Numbers, I would like min/max values

View Answer


   
vsquaredevents (January 17, 2016 at 09:46 PM)

I had it working on my form for a couple of weeks and now it is not showing up.

View Answer


   
IceMelt (January 18, 2016 at 08:58 PM)

Is there a way to separate out the list info into it's own row in the CSV? See this question with screenshots to see what I'm talking about (we want to be able to sort the data entered into the list by date/time): http://www.jotform.com/answers/747963-Data-Entry-from-Form-How-to-separate-data-into-rows-for-easy-sorting#0

View Answer


   
TravisPerkins (January 27, 2016 at 07:42 AM)

How can I get rid of the * in the widget name?

View Answer


   
raminal69 (January 27, 2016 at 12:27 PM)

Is there any way to use in configurable list the dropdown with the special options like countries ?

View Answer


   
VanKesterenIT (February 18, 2016 at 03:10 PM)

Hi,

I have made a form with a configurable list witch works great!
I export the file as an excel file and import it again in Ms Access for further use in my database.
I've build a way to filter the columns out of the field so they can be stored in different columns in Access. I do that by checking the info between the ":" after the first column and the comma "," before the second column. Unfortunally the last entry (last column) does not ends with a comma.
Is there a way to add that comma so my code works? Or is there another way to solve this problem?

View Answer


   
MarianJijoPunnoose (February 26, 2016 at 08:23 AM)

I am not able to edit the properties. Kindly help

View Answer


   
sogs (March 17, 2016 at 01:03 PM)

I have used this widget successfully in a one form, but now when I try to do it the title "Configurable List" appears on the same row as the data fields. How can I get the data fields to start on the next row?

https://form.jotform.com/60756730168258

Thank you!

View Answer


   
tamsyn (March 21, 2016 at 04:57 PM)

Hello there!

I'm feeling a bit stumped...Is it possible to have multiple rows where specific options within a row might change or be different from the row above or below it?

Here's what I'm trying to do: I need to find out if form users have one (or all) of three types of employees on their farms -- full-time, part-time or seasonal.

For each option they select, I'd like to have them then input number of each type of employee.

I'd like the final setup to look something like this, where "x" is a checkbox:
..................................
EMPLOYEE TYPE NUMBER?
x Full-Time [Number Box]
x Part-Time [Number Box]
x Seasonal [Number Box]
..................................

When I attempted the above in the widget, however, I got a checkbox option with those three choices, but only one number box.... Duplicating the row also duplicated all the employee types -- which, sure, I could do, but it looks clunky and has unnecessary duplication.

I tried a different setup, making each employee type its own column, leaving the column header blank (e.g. -- :checkbox: full-time), but then couldn't figure out how to get the next row to be just a row of number boxes aligned under the checkboxes.

This setup would also be fine (but is it possible?).

x Full-Time x Part-Time x Seasonal
[Number box] [Number box] [Number box]

The only way I could figure out to sort of do what I wanted was with a dropdown box and number box each in its own column .... but the problem there is then I can't specify unique default text in each drop-down.

Is there a way to set this up that would accomplish what I'd like to do? I'd like this to be as straightforward for users as possible....

Is there a better way to do it with the standard JotForm tools, rather than the widget? It didn't appear so to me...

Thanks so much for your help!

tamsyn


View Answer


   
mattcaptain (April 04, 2016 at 08:44 PM)

Hello,

Is there a way to customize the width of the "add" button? I have customized the text (instead of just a + sign) and the button cuts off the text on the right. I would like to make wider so it includes all of the text. Thanks!

View Answer


   
stuartdome (April 08, 2016 at 03:53 AM)

Hello,
I would like to ask you if you could help me with two things:
1. I would like to see on screen who has first filled-in the form in the "configurable list widget", that is, I would like to see what has filled-in costumer compared to the current one.

2. I would like to insert an automatic progressive meter in the "cons list widget.

Thank you.

View Answer


   
mecglobal (April 15, 2016 at 04:04 AM)

Hi, how can I add a multiple selection like this widget http://widgets.jotform.com/widget/multiple_selection ? Because I have a lot of items and it's too long and unclear with the checkbox. Thank you in advance for your answer.

View Answer


   
MydigitalAthlete (April 24, 2016 at 01:00 AM)

HOw would i remove the option to add more rows?

View Answer


   
browningreagle (May 11, 2016 at 04:36 PM)

I'm creating a form that would allow our clients to send us updated contact info, and I'd like them to be able to enter multiple phone numbers if needed. Ideally, the hint text would display (###) ###-####, which is how I would like their phone number to be formatted.

If possible, I like to have the field structured in one of two ways. One would be that the parentheses & hyphen are locked in and the typed numbers fill the appropriate spaces [(___) ___-____]. The other (which is probably simpler) option would be that after the user goes to the next field, the number they typed in would be auto-formatted [1234567890] >> [(123) 456-7890]. I don't have any preference between the two, but the field should only allow numbers.

Is it possible to accomplish this?

View Answer


   
Moulin_Albinus (May 13, 2016 at 05:05 AM)

HI, how can I set up the checkbox field with a limit of 2 selections in a list not more ? thanks

View Answer


   
megavado (May 15, 2016 at 01:16 PM)

Hi. I'm creating a form and i'd like to use Configurable List. I want to add some Conditionals to the fields and i want that: when the user click on ADD more it creates the fields with the same conditions. Is it possible?
Thanks

View Answer


   
grupotecno (May 19, 2016 at 03:06 PM)


My list is very long , it can be divided into two rows ?

View Answer


   
Jean-Claude Massé (May 27, 2016 at 07:23 PM)

Date format 24 should start with 00 and end with 23. This is the normal way to show this. Is it possible to change this?

View Answer


   
SouthamLaw (June 04, 2016 at 01:06 PM)

I have used this widget to set up the form that I want. It's working great. However, the test responses send the widget information in an unencrypted format, despite the rest of the form being encrypted. Is this something that can easily be fixed? Here is the form in question: https://form.jotform.com/61516877744164

Thanks!

View Answer


   
lasolastech (June 14, 2016 at 07:06 PM)

Is it possible to add attachments to each line of the configurable list?

If not, (on this widget), is there another one that does?

~J

View Answer


   
marklane (June 15, 2016 at 12:14 PM)

Is it possible to have the (Calendar : date : m/d/y : 2000-2015) display all blanks as a default instead of whatever the current date is? Please let me know if this is possible.

View Answer


   
drainbolt (June 20, 2016 at 10:43 AM)

Hello,
I'm trying to get my two radio buttons to align with the other fields. Currently they're vertical and the text doesn't align with the button. Thanks

View Answer


   
netscreens (June 23, 2016 at 04:01 AM)

Hello,
is there a way to calculate the fields. For example i want to multiple two cells.

View Answer


   
agilo (June 29, 2016 at 09:16 PM)

How can we make the Configurable List Widget responsive to fit a mobile phone?

View Answer


   
abenaim (July 08, 2016 at 02:43 PM)

Hello, I am trying to have each column with a larger separation, meaning more blank space in between each column?.

View Answer


   
Tfklmm (July 18, 2016 at 06:50 AM)

Hello, I'm trying to custom the style of my configurable list but the css selctors such as :hover seems not being taken into account. Is there any solution ?

View Answer


   
shams27vk (August 03, 2016 at 08:06 AM)

Hello!
How I can align 5 colums to the left?
This form (3 page):
https://form.jotformeu.com/62102264902344

Thx!

View Answer


   
dariete (August 09, 2016 at 04:39 AM)

Hi, I can't figure out how to define the width of each field through CSS. Tks

View Answer


   
sellable (August 16, 2016 at 09:45 PM)

Hi. Can I add a separator between fields? I have set up a date drop down (MM and YYYY) but would like to add a "/" between the fields.

Can you help me with the custom CSS required?

Thanks!

View Answer


   
micusaIT (August 17, 2016 at 01:35 PM)

how can I make one of the fields a price field?

View Answer


   
nationalhotel (September 26, 2016 at 07:02 PM)

Hi,
Is it possible to have a text field populated automatically depending on the option selected in the dropbox?

View Answer


Send Comment