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! 

Send Comment

307 Comments...

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

  • XplatformKSA

    how to make a calculation table using configurable list

  • ekgaevents

    Hi On my configurable list .. i am looking to make the text boxes smaller to make all options fit on the page better. I cant figure out how to do this.. can you help me please

  • studentservicespt

    Hi, how do I add limits in the 'Date'? I'd like only dates that are 2 weeks from today to be selected.

  • DarkroomRefinery

    FIELDS FONT COLOR.

    I would like to change the fields' font color so that it matches the rest of my form elements.
    Is there a way to do this?

    Thank you

  • orbin

    Configurable Widget
    Q: "How to format the widget rows into an "ordered list" (1,2,3,4...) shown in static text"

    EXAMPLE:
    1. [textbox][dropdown][date]
    2. [textbox][dropdown][date]
    3. [textbox][dropdown][date]

    Desired result:
    * +/- ADD/DEL = The number listed would increase/decrease - based on the user's action.

    Thanks!

  • gforceforms

    Hello, Is there a way to better separate to data within the excel export. Current result below

    [Quantity: 15, Month: 7, Year: 19Quantity: 8, Month: 6, Year: 19]

    Currently no separation of the two sets of data

  • QCECDataCollections

    Can we put 11:00AM as the default time instead of "now" as the default value of a time field?

  • mattssei

    Is there any way to carry over the date from the previous line to the new line - so we're not entering the date for each line?

  • QSESolutions

    Can you configure a calendar within the widget to be a fixed date or configurable date without manually selecting the mm/dd/yyyy?

  • avristhr

    can we set the date field only for YEAR & MONTH without DATE?

  • refugeehandicarfts

    How can get Total Calculation Value At The End

  • ABSDigitalTeam

    I'm trying to minimize the width of each column since it's going over the form size, I already tried:
    input[type="text"] {

    width: 150px !important;

    }
    AND
    td.col2 > input {

    width: 200px;

    }
    (this one I tried for every column as well (ex, td.com1, td.co2, etc))
    I pulled both of these from other answers here but they're not working for me, can you please give me some guidance?

  • levidasesor

    How do I put the Input as 'Required' in my form , IT SAYS WITH * Just it should do it but it wont go.

    Example: *Label:Label text: asda (nothing happens)

    I tried with, Example: '*' Label:Label text: asda (nothing happens)

  • Jon

    Responses exported to google sheets are populated all in one cell. Is there a way to parse the response such that each field is a column and each row and one row in the configurable list?

  • BringitonSports

    Hello,
    Is there a way to default the Date and Time to the current date and time?
    Thanks

  • graymontHR

    Is it possible to change the width of each text and text area field? I'm a rookie with CSS.

  • nbomfs

    Custom CSS Tab not available

  • miguelben

    Can I specify a correct answer? For a quiz for instance, I'd like to let the user know if their answer is correct or incorrect.

  • USGA_MMUN

    I'm using a "input table properties" widget and want there to be a condition that if the first column has a value, the second column also requires a value- is this possible? I can't find a way to configure it

  • VisAbility6100

    I can apply custom CSS to our form including the add/remove buttons however cannot get the hover attribute to function correctly. Can you provide any advice?

  • CopernicanCoach

    I've used CSS to configure the layout of the form.
    My issue is the data on submission remains in compressed column form, and I'd like the submission to reflect the form layout. (Multiple lines, easy to read and follow rather than tight columns.

    How do I get the final form upon submission to read like the input page? The form is emailed to the client upon submission and it is unreadable due to all the answers populating a columnar grid.

  • CopernicanCoach

    I've used CCS to configure the layout of the form. My issue is the data on submission remains in compressed column form, and I'd like the submission to reflect the form layout. (Multiple lines, easy to read and follow rather than tight columns.

  • Focux

    Hola como estan, puedo cambiar los meses al idioma español?

    Muchas gracias!

  • Jordan Callihan

    Can I add a total, if I am using the list as a time sheet.

  • achieveeducation

    Is it possible to add links within the text of a checkbox? If so, would it affect the mobile responsive custom CSS if I want my fields in the card to go to different lines?
    Many thanks.

  • projectofficer

    Hi, love this widget!
    Is there any way to have a line break in the static content, similar to

    For example, I would like the static content to display:
    Fire Extinguisher
    PFD
    Flares

    Currently, all I can enter is:
    Control : static : Fire Extinguisher, PFD, Flares
    This shows the Control items as a single row, which looks messy.

    And no, I do not want to insert new configurable lists for each item, as I have other columns after the static column.

    Is it possible please?

  • lokita_daki

    Hello, I don't see the custom css tab when I am in the widget settings. How can I configure the css? Thanks

  • OPS_EE

    Is it possible to add in a image upload option into the configuration list? If so, how?

  • Grimaldi_Anthony

    If I am doing a column as a rate and multiple choice for amount of hours is there anyway I can configure the total ?

  • CariadBabi

    I would like to limit the time range similar to the date range, to be between 9am and 5pm, how can I do this?

  • harpbelle

    May I know if I can make calculations based on the input as well as conditionally send different messages depending on the input in the Configurable list?

  • sullivan.s.matthew

    Is it possible to change the button size in the CSS?

  • razantour

    I don't see the custom css now ? , there is no custom css tab, where is it ?

  • m109094010

    I use the "Configurable List Widget" a lot in my form.
    How could I change the size of each item, for example the .text and .number? Also, in these two items of the widget , how could I make a default value which could be sent?
    such as :
    Name:text: aaaaa
    Value: number: 100
    would not send the default value like aaaaa and 100 to the SheetFile.

  • umosjotform

    Is there a way to set a limit range for the Time field?

    For example, we want people to only be able to select a time within our operating hours, so is there a way we can we limit the time selection to be from 8:00 AM - 5:00 PM?

  • coralsprings954

    How can I add some sub-level text at the bottom of the widget?
    The Static option puts it on the right side. I need it at the bottom of the widget.

  • FloridaMedical

    I would love to have either the box to expand to the number or rows as they type, or the ability to set the number of rows that shows

  • Rabi Baig

    Is it possible to make one of the fields alpha-numerical and limit the number of characters?

  • mlkla

    Is it possible to pre-populate these dynamic fields with values using a URL parameter, or finish later method? The fields don't seem to have unique names - only "input", and not sure how to generate the lines required using the URL.

  • clewis861

    I love this widget! For the Time field type, is there a way to narrow down the list in the minutes drop down to just 00, 15, 30 and 45? It's just a lot to scroll through.

  • VolleyballQLD

    Can I put a auto number on each row. That is first row has a one, second row has a two, etc.
    Thanks

  • Matraka

    Hello, I need your support on the configurable list, I have 5 colums, the first 2 are numbers and i already find an answer about delete the negative number by de CSS code, in the 3rd colum will be a description of something, but the area is to small, so i need your help in this point, I need to do the area bigger width like for 50 characters.
    I tryed to do this with the CSS code textarea {width: 400px !important;} but this affect to all textarea fields and no to the textbox field.

    Can you help me please?

    https://www.jotform.com/build/92484946501867

    Many thanks in advance

  • DavidHeller

    Within a 'time' field, is it possible to set a default value e.g. 8.00am? I can see that you can set the default of 'now (i.e. the current time) but can I set any other default value?

  • Massasoitartguild

    Hello,
    On Configurable list, I s it possible to make the text area box a little bit wider using custom css? (Not taller as for long form text, but just a little bit wider)
    I looked at other people’s questions in case you already answered but couldn’t find any info.
    https://form.jotform.com/91914650619159

  • ioapros

    Is it possible to have a different static text (first column) on each row?