User Guide

How to Set Up the Configurable List Widget

Last Update: April 27, 2017


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 Area
-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



Accepts plain text

Field Label:text : Hint Text



Accepts Numbers only

Field Label:number


Text Area

Accepts more Text in paragraphs or narrations 

Field Label: textarea : Hint Text

Comments : textarea : Hint Text


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


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


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


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


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: 

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! 


  • swapna_summit

    How to make a textbox as an email vallidation

  • FunglobalACT

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

  • richt74

    Hi is it possible to add an upload image input

  • philaiellomarketing

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

  • braavos

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

  • noli414

    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!

  • felmiranda

    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.


  • michaeloucks

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

  • OregonAITC

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

  • jamesforpm

    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.

  • kolumbanbotond

    Can I make price calculations with this?

  • bimchk

    How to add multiple options?

  • phorest

    Thanks, this is a great feature.

  • Ray

    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...

  • IEHA

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

    Great feature by the way.

  • rafdn83

    how can limit text area to 200 character?

  • leoncxw

    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 ?

  • browningreagle

    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!

  • browningreagle

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

  • lmrttn

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

    2nd page

  • tfsforms

    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.


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

  • Nadine

    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?

  • itchai

    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.

  • bishopsjot

    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!

  • suzanabueno

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

  • iannel

    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

  • guineapigme

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

  • saltadministration

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

  • saltadministration

    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.


  • callibee

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

  • acpevans

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

  • wallace.stevens

    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.

  • sfields

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

  • martinbond

    Please can someone help with the following:

    1, insert new static text for each row?

    2, change individual column sizes.

    Thanks in advance.



  • LRGR

    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?

  • LRGR


    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.


  • gymnasticsvictoria

    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

  • gymnasticsvictoria

    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.

  • gymnasticsvictoria

    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.

  • David Ortega

    Hi, Is there a way to add quantities values.

    this is my form

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

  • zimmerfrei

    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.

  • ebomb321


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

    is this possible?


  • bimchk

    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.

  • chswecke

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

  • dbrady3300

    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)

  • andrew184

    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?

  • brewha51

    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?


  • starcresc

    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;}

  • mgsgaliza

    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?

  • GandSEandW

    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

  • theadnanc

    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

  • rluqui

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

  • rluqui

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

  • ChessGuru

    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?


  • Gauravsomwanshi

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

  • CaioFilho

    How to turn it mobile responsive??

  • ggsstarvending

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

    Is this possible???

  • arthurchee72

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

  • afriedges

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

  • sswacus

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

  • vsquaredevents

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

  • IceMelt

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

  • TravisPerkins

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

  • raminal69

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

  • VanKesterenIT


    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?

  • MarianJijoPunnoose

    I am not able to edit the properties. Kindly help

  • sogs

    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?

    Thank you!

  • tamsyn

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


  • mattcaptain


    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!

  • stuartdome

    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.

  • mecglobal

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

  • MydigitalAthlete

    HOw would i remove the option to add more rows?

  • browningreagle

    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?

  • Moulin_Albinus

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

  • megavado

    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?

  • grupotecno

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

  • Jean-Claude Massé

    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?

  • SouthamLaw

    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:


  • lasolastech

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

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


  • marklane

    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.

  • drainbolt

    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

  • netscreens

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

  • agilo

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

  • abenaim

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

  • Tfklmm

    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 ?

  • shams27vk

    How I can align 5 colums to the left?
    This form (3 page):


  • dariete

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

  • sellable

    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?


  • micusaIT

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

  • nationalhotel

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

  • Fwallace


    Can we split the colected data into different cells on google spredsheet ?

    it create 1 big cell instead of splitting informations into different cells.

    If possible i would like to have a cell with the name of each field.

    Thanks !

  • donnaerlig

    How to set a minimum value to number in the configurable list

  • Hint

    can i add a image upload button?

  • canadaroyalcanin

    How do I set a default time to blank? If the time is not manually selected I don't want it to show a time in my report - so I need a blank option

  • smlacdst

    Hi, Is it possible to set a maximum number of characters or words for the text area in this widget? I know it's possible with the default text areas. Thanks.

  • bsalcpt

    delete entry does not show up in the row

  • skinnytrans


    Is it possible to make a prepopulated list, with options left open?
    I mean that have about 20 filled out list and there is an option with numbers and a dropdown list which is dynamically changing.
    I would appreciate any help you can give me as you did in the past. Thanks very much in advance,

    Skinnytrans IT developer

  • Topdeck_Travel

    Hello, Is there a way that each textbox/area in the widget will generate into a new column when exporting the forms to excel?

  • asacnominating

    Hi! I need help with 2 things for this widget:
    1. I only want the users to select a year. What is the configuration for that?

    2. For another section, I want users to be able to select a year start date and a year end date.
    What is the configuration for that?


  • DragonsVolleyball

    Is it possible to count the number of rows entered into this field?

    I am trying to create a nomination form where a person can nominate as many teams as they wish, and I'd like to use the number of rows to calculate what they will need to pay using a Form Calculation widget.

  • MarianaCCForm

    Hi. Can you do something similar to this but have 3 columns and 3 rows to fill in?

  • Versilia

    Hi, I need to take the values from a specific column for each row added and sum them into a separate number field. Is this possible please?


    Is there a way to configure:

    to be aligned to the left?

    Thank you

  • GranvilleRefs

    This widget is exactly what I want but for one shortcoming. I need the Text Area field to be HTML enabled. How can I get that?

  • harvardyearbook

    How do I include a colon in Hint Text? How do I include commas in options for a dropdown?

  • GranvilleRefs

    I can't get my widget to expand to the width of the form by default. Even in edit mode when dragging the size of the text area fields, only half the width of the form can be used.

  • allfrom1supply

    Is there a way to show the Hint text as a tooltip on hover rather than in the field? Or like title attribute show the full text on hover? The reason is that the explanatory text is much longer than the field - ie a QTY field need only be 40px width but the explanation "Please enter the number of doors" is longer.

    Alternately I would suggest an optional 'i' button for this component so they could get a popup showing a description of each field in the row.



  • schera

    I have 2 fields, a number field & textbox. I am trying to get the width of the textbox larger. When I enter the below custom CSS, the textbox changes size in the Build part of the form. However, if I Preview the form, or view the form Live on my website, it remains the shortened version of the textbox (roughly 150px). Thoughts?!

    Quantity: number :
    Description: text :
    .col2 input[type="text"]

  • beby21

    How do I make the date default to blank rather than todays date?

  • ssccbspadm

    I have one Configurable List with just 2 fields, one as a text and other as a number. How I can format the number with currency format (prefix =R$ and 2 decimals with , as decimal separator and . as thousand separator)? Thanks

  • TrainingDepartment

    My dropdowns are not behaving as required fields even though there are "*" in front of their names in the widget code. Is there another way to make sure the dropdowns are required for the form to be submitted?


  • Willis1776

    My form is

    I'm looking to do add a few things that I'm not sure about. I would like to remove the white space that is between the last row of entries and the ADD/REMOVE button.

    Also, is there a way to add a line to separate each entry?

    One more thing, how can I make the textarea object bigger? I would like more space for text.


  • ccomeaux

    After my form is completed, the PDF report that is emailed to me or accessed through "submissions" does not show the data in the configurable form. How do I fix this?

  • rkautz

    When the configurable is embedded in a notification email, is there any way to control the width of each column in that notification email? Currently, in a five-column table, the first four are very narrow, and the fifth is very wide. I'd prefer that each column gets an equal 20% width.

  • mfqcp

    Is it possible when selecting the number type to actually make the html code number as well? Currently number keeps the html code as type="text". The main issue i'm having is that on an ipad/iphone the keyboard defaults to the alpha keypad, not the numeric one. When users have to enter a large amount of data, it can get tedious to change the keyboard on each field.

  • clearenergy

    Hi, I'm an asbestos surveyor and am creating a form to collect sample data info (location, description, severity etc). I would like to allocate an automatically generated, sequential sample number to each row this widget generates - is this possible? Also, the option to take a photo for each sample would be incredible.

    Thanks - Adam.

  • abrownpls

    Is it possible to limit the dates in this widget by day of the week? I have a date field that I would like to limit to Sundays only.

  • knowledgehutsg

    Hello, are there any maximum amount of options under the dropdown feature?

  • wayfarer

    Can I add sublabels?

  • academy118

    Hi i have added calander to list widget but do not want it to display current date, can you configure this to just have select or just dd mm yyy. thank you

  • SB_Operations

    Why do I have 2 configurable lists on my form? I only set one up and I can't seem to delete the one on the bottom - please help

  • Primasia

    How to have different text in different row?

  • Elsa

    Hi, can I add numbers on the left hand side of each row in sequence?

  • supplychainMIS

    Can I set a date field to display a fixed date (using CSS) rather than the default date (Today)?

  • bhds

    When using a date field, can I turn off the calendar picker so that it is not displayed? I would prefer users to select a date from the drop-down boxes instead.

  • Fizmotionless

    How can i change of each rows to have a different text because if i type in for the first row then it would just be the same throughout

  • detiketa

    How to use condition as change email based on contents of a field

    i.e. if a field has "yes" send email to if not send to

  • guvenelektronik2

    How to do mask entry. As a number

  • drbillingservice

    How do I remove the "add" button (+).

    I dont need it in my list. Thanks

  • ssccbspadm

    I have a Configurable List with Maximal Rows = 2.
    How can I put a Static field in each row?
    Look my form 72265304235652 and see: I have today the first column in the Configurable List as dropdown field but I'd like change for a Static field (2015 and 2016) in each line.

  • resortpass

    I can't see the "Custom CSS" tab. Any ideas?

  • cformation

    I have added multiple check box fields but they the fields that are checked do not show up on the report

Send Comment