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

275 Comments...

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

  • stephanieraye

    Is there a way to adjust the font size in the widget fields?

  • morleygallery

    Can you change the name of the table from configurable list as this is what is on show to form user?

  • HubbardRealtyGroup

    Hi there!

    I have tried adding an asterisk to the questions I want to be required but it isn't working. Could it be due to the custom CSS I have on the form? I have custom CSS that puts each question in different rows. Thanks.

    form: https://form.jotform.me/92373578047466
    The widget is in the "Contacts" section.

  • lharias

    I am integrating my not form into Salesforce but the fields I am using on the widget do not appear as options, is there some way of having the fields integrate?

  • jnortheast

    How can I make my text box larger
    https://form.jotform.co/92372915351862
    Cheers

  • grs.ami.19

    Hello, is it possible to adjust the spacing between each option in a checkbox list?

  • ipanagiotopoulos

    I would like to modify the width only on a specific field from the configurable list. How i can do it?

  • mz.maclay

    Is it possible to export the results from the configurable list so that each field shows up as a separate column and each entry a new row? I want my users to fill out this form once, but I need to have that data separated out while the form is live so I can compare and find results.

  • Justjade

    Need help with adjusting textbox size please

  • supplychainMIS

    Hi,
    Is it possible to configure a number field in the Configurable List Widget so that it only permits positive number values?
    regards
    Tony

  • JoshShofstahl

    Any way to add a line break so that one entry is 2 rows?
    :break:

    Also function for a math operation would be helpful.
    Total Time: calculated: {{End Time} - {Start Time}}

  • hanzekovic

    Hello! I know this is a long stretch, but: is there any way to make the submission of Configurable list feed SEPARATE FIELDS in the Excel Spreadsheet?

    Thanks

    Sonia

  • debdoo66

    Hi this is an awesome widget but is it possible to make a "number" column be a dollar amount?

  • thailandetc

    I'd like to add the form to my site without using the iframe. I want to style it locally, meaning I do not want to use the Jotforms CSS option. How can I do this?

    I've already tried copying the code produced in the DOM, but that only produces errors.

  • ARCORACI

    Can you adjust font size

  • LakesideMembership

    I would like to do two things with this widget. One, how can I make the calendar display just a month and year. Two. I want the text box to be a single line not double. This way when the customer adds another line it is all in line.

  • coolgbitssoho

    Hi..
    In Configurable List Widget field,
    if I fill in the name in the text area, can it be recorded so that other times I refill the same name automatically filled with that name?
    so I can save time.

    I really appreciate it

  • tllopes

    how can i change the language of the date picker

  • pricelesspendantz585

    CAN YOU CHANGE THE COLOR OF THE TEXT INSIDE OF THE CONFIGURATION LIST

  • pshmker

    Hi,
    I'm using zapier to export the entry to a Google sheet, however when multiple items are created and submitted they appear as 2 lines in the same field. I can get Google sheet to parse on commas, but there's no delimiter between lines (records). Ideally I'd like each item added to the form and completed to be added as a new line in Excel.

    Hope that makes sense!

    Paul

  • JoaneMarlet

    Hi, I just want to find out. if there is a way to make the dropdown list take out an option if it was already selected on the same day?
    Thanks!

  • okileksmana

    I can't find custom CSS tab anymore, so how to inject custom CSS ?

  • huddleinc

    The options in the dropdown field type are not showing correctly in the preview or published form. The options are cut off and adjusting the size of the widget or form do not fix it.

  • Edovo

    Is there a way to give the user an option to upload an excel or csv file to auto populate their list. For instance if there are multiple rows that need to be added for a user, and they already have a list, can they upload it to complete the list. Either that or have them upload the file, but does Jotform allow you to host a template file?

  • smif

    Is there a way to have the widget total a number column, or to use Conditions to populate another field with the sum of a number column?

  • venine_center

    What to do i want default value ?

  • Serge4PHI

    Hi !

    it is possible to set the width of each box ? I've one with a date field, a text field and a number field. My problem is : it doesn't look good on smartphone scren as it's off screen.

    Thanks in advance.

    Here my form : https://form.jotformeu.com/91421205022338

  • Albertell_Matthew

    First, I have to say how much of a fan I am of Jotform and its capabilities. Hopefully, someone can help me with a rather difficult problem I have been having and cannot seem to find a solution.

    Is it possible to have a numbered list of priorities, that are numerical based (1-5), that come from a list of 25 possible choices regarding priorities one can choose from? Five priorities are required and each priority must have a different number.

    For example: There are currently 25 current priorities (columns) a congregation has to choose from. They are to pick their top 5 priorities (numbering them 1-5) while leaving the rest blank. Below is an actual example of what I am trying to accomplish and have two columns from the 25 to illustrate. As the list below continues, there cannot be duplicate entries as far as the numbered priorities are concerned. People cannot choose a priority of five twice from different columns.

    Top Priorities:
    Help people develop their spiritual life _______ 3
    Help people understand and act upon issues of social justice _________ 5

    Is there a way to continue this list and accomplish the aforementioned, while making the five mandatory, and ensuring the 1-5 choices are contained and not duplicated per row?

    It has been extremely difficult finding and I would be incredibly grateful if anyone could assist in this matter.

    Many thanks,

    Matthew

  • aeinspahr

    How can I change the format to show a text box for every checkbox that is available? I have 8-12 options for checkboxes but only one text box shows up for the first option. I need text boxes for every option.

  • KenyonTech

    Using widget: Configure List
    On a dropdown, can you change the color of one of the words?

  • KenyonTech

    Using widget: Configure List
    Is there a way to place an automatic counter in one of the columns? (ie. 1st column would have 1, 2nd column would have 2 and so on everytime you add one.

  • kimidawn9

    Can you change the widget to rows instead of columns? I have too any columns to show up across the form, and would prefer to have the items horizontally presented so the fields can be wider and still fit on the form.

  • sunm

    What CSS code do I add to make it to two lines?

    Thanks in advance

  • andrewg1234

    Hi,
    Can you put the result of a calculation in a text field?

  • WelcomeBookatable

    Hello there,

    I have implemented the widget to give users the ability to add a series of dates. However, we are now using the form in different countries and were wondering whether the months within the calendar could be translated into other languages? We've added translations via the Settings tab, but they are not being picked up by the widget & I can't see a way to stipulate other languages in the widget settings.

    Is this possible?

    Look forward to hearing from you soon!

  • grs.ami.19

    Is it possible to make one checkbox option a text field that a client can type in an option not listed?