JotForm User Guide / Advanced Features /

How to Set Up the Configurable List Widget

How to Set Up the Configurable List Widget


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! 

Send Comment


See all comments
  • matheg

    Hi! How can I setup the size (width, min-width) of a text or textarea object?
    .text {
    width: 500px
    I tried the code above but it didn't work.

  • RunForest

    Hi! i need to make an order form, so that´s just 2 items to fill:
    1) Product ID, I need the user to select between the codes i defined for my products, how can I do? they´re almost 50 products, so the dropdown is not an option...
    2) quantity, i need this is just a POSSITIVE number



    HI, how can i do more bigger the text box to see all the text that i wrote? tks guys!

  • rossall

    Are you able to define a period of time eg between 16:00 and 19:00 hrs in the same way you can choose a certain period in year on the configurable form?
    Thanks KLA

  • studiophos

    How can I sum the rows in case they are numbers?

  • kr8ve1

    It would be great if this could be integrated into a payment system. It's so much easier to read than the Payment Product order form.

  • sgonserbrg

    I can't get a negative number. How can I fix this?
    Thank you.

  • ibmemessage

    Is it possible to number the rows? i.e. If more than 1 row is added it displays as:
    1. Question, Question, Question
    2. Question, Question, Question



    How do I configure a dropdown option of numbers to only have positive numbers? Currently my form has -1, -2, -3, etc as options and I would like to eliminate that. This is my field configuration box:

    WW Item Code : text : e.g. 131057
    Item Description : textarea : e.g. WW Estate Pinot Noir
    Vintage : text : e.g. 2016 or NV
    Case/Pack + Size : text : e.g. 12/750ml
    Number Bottles OC : number : # of Bottles
    Number Bottles SF : number : # of Bottles
    Number Bottles SD : number : # of Bottles

  • jimarch

    I've set up the widget to do the automatic numbering of each line based on your answer to laurahonjas below and it works great. The only piece I am still looking for is to be able to capture the line numbers in each row. I'm looking to use the line number plus the unique form submission number to create a unique key that will be wrote out to a SQL Table. Any help with how I can have a unique ID for each line would be greatly appreciated.


  • laurahonjas

    hello- Also can I automatically number each row in the first column of the widget?

  • laurahonjas

    - I am trying to configure this widget so that the minimal number of rows is based on a number which the person filling out the form enters --> so the minimal number of rows allowed in the configurable list will vary every time the form is submitted. Is this possible?

  • WRESfieldops

    How can I configure the time menu to show the minutes in 15 minute intervals?

  • sprucesupplychain

    I am trying to adjust the width of my form to allow the configurable list to fit in it, however it looks fine in the draft but when I go to the preview form I can not see my complete list (a section on the right is hidden). The width is set on 1550. How can I make this work? thanks

  • bc4885

    Is it true that the Custom CSS function is not available with the configurable list in the card view?

  • exploremyws

    can we add prices to this widget?

  • Jits

    Hi, is it possible to have checkboxes appearing in a row rather than the default column?


  • HRJerseywater

    Hi team,

    I've found a minor glitch that you may be able to help with?
    When you put text into these fields and then return to edit (to change punctuation or add a word) all the text in the box disappears and you have to start again. Frustrating for users.

    Any thoughts please?

    Great widget by the way.

  • keyless

    Hi there, how can extract a single field information of this widget to setup a conditional logic?



    I need to right move the remove button. I've tried with this code but with no success :
    button.remove {
    left: 250px !important;
    position: relative;

  • TGPForms

    Is it possible to limit the number of characters a user can input into the text box?

  • ZTEXConstruction

    Is there any way to pre-populate several rows?

  • rpcna

    I'd like to add a column that calculates time worked based on 2 time columns (start and end). It would be great if you could add a field for someone to add a custom calculation.

  • acct

    Hi, nice widget.
    However, why is it that the "Custom CSS" tab is not showing beside the General tab under the Widget parameters?

  • kabirkhanna

    Is the form is responsive

  • LucBaetsle

    I want 4 dropdown boxes with different static text, like
    Users 1 - dropdown (0,1,2,3) * 120
    Users 2 - dropdown (0,1,2,3) *130
    Users 3 - Dropdown (0,1,2,3) * 140
    users 4 - dropdown (0,1,2,3) *150

    then the result in te Widget Calculation

    Is this possible ?

  • scarabsweepers

    This widget is an absolute must for simplifying complex forms...

    I have one request for any future updates could you please give an additional option for 'Time' and include a choice of 15-minute increments as well as an exact time.

    Great work thank you.

  • fepsch

    hi guys!
    Need to add every field in a different column, not row.
    Is it possible?

  • robbyelliott

    Is it possible to duplicate a line?

  • JonjoCZ

    is any way how to translate the date format in another language?


  • marcelocant

    Can I change the line separator for the Excel report?

  • cformation

    Is there any way to make the radio buttons line up horizontally rather than vertically?

  • YWCA_Hamilton


    is it possible to set height and a border color for the textbox and input box for number? I tried and its not working. Id like to set the border-color of the input box as #555555;

    Thank you.

  • Info4SCG

    Don't know why can't display the Configurable List Form:
    Please tell me where should amend? Thanks

  • Info4SCG

    How to custom CSS in order to increase the space between columns?
    Thank you very much in advance.

  • Lil_Matt

    Awesome widget but is there a way to have multiple text boxes in each column. I am wanting a text box before every radio button. or perhaps have multiple static texts in each column

  • jetaany_treasurer

    It would be great if we could add up the values entered in the number field into another form element. Right now, it adds the date and the number field together.

  • rotwori

    This is a very helpful widget. Is it possible in future to enable one to set limits on the numbers that can be entered, for example to allow only positive figures. And also you could set it such that you can set limits or conditions to two fields for example two number where one cannot be less than another.

    In the mean time is their a way i can do this manually using javascript?

  • ben_innocent

    Hi Typeform - this widget is amazing - a problem I've been looking to solve on a process here.

    I wondered if you can help with the data integration bit of this form specifically - when I link to Google Sheets (not sure if it's a Google thing or not), the default output for this is one cell, with records on multiple lines.

    I wondered if it's possible to set this up so that for each line entered via this input, will generate a unique line when outputting?


  • Glovian

    Thank you for bringing in such a great widget, it is extremely useful which I have already been using it a couple of times for the form I built. Just one question with regards the setting up of the number field though... is there any possibility restriciting the input number to fall with certain range? (E.g. accept positive numbers only)

    Any advice is hugely appreciated.

    Thank you very much in advance.


  • jcarey5225

    This widget is awesome, however I'd like to be able to change the dividing character in the submission, as parsing with a comma is difficult when textbox/area is used.

  • cformation

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

  • resortpass

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

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

  • drbillingservice

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

    I dont need it in my list. Thanks

  • guvenelektronik2

    How to do mask entry. As a number

  • 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

  • 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

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

  • supplychainMIS

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