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. 

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

201 Comments...

See all comments
  • popfolio

    How do I build a checklist of 10 different numbered descriptions (static text) with each item that requires 3 columns of checkboxes (for eg. Yes / No / Maybe) and 1 column for remarks (text)?
    Item Yes No Maybe Remarks
    1. aaa
    2. bbb
    3. ccc
    Seems from some of the comments below, line breaks are very much in demand for this widget. Pls find a way to include it.

  • ChiryokuRyu

    PLEASE HELP

    im trying to make a register; with a checkbox for attendance and a textbox for additional notes

    but i cant put different names on multiple rows :(

  • Pete36

    How do I insert line breaks. I want my form to have boxes as follows:
    FIRSTNAME MIDDLENAME LASTNAME
    STREETADDRESS
    CITY PROVINCE POSTALCODE
    COUNTRY

  • Justjade

    i LOVE THIS widget, finally something that covers everything! However, even with your example form, the boxes overflow. Is there a way to make the selection smaller (smaller text, wrap text?) to fit the full box onto the page?

  • uncbd

    For the 'Number' field box, is there a way to exclude negative numbers?

  • indospirit

    I want to validate the email field in this widget. How it can be done? Anyone, please suggest?

  • KarFre

    I've already reviewed the instructions on how to setup a configurable list and those instructions do not address how to limit/restrict/format the number entry field. I need to restrict commas in dollar amounts and include a dollar symbol. Right now I have some users entering commas, and others who are not. This is problematic when exporting the data for analysis and I need to make the entries consistently formatted. Can you help?

    Here's my original question:
    Is it possible on the number field to have it automatically enter a $ sign and comma for dollar amounts such as $500,000?

  • KarFre

    Is it possible on the number field to have it automatically enter a $ sign and comma for dollar amounts such as $500,000?

  • noidifercam

    Hello,
    would it be possible to integrate the "autocomplete" function in one of the fields?
    I know there's a dedicated widget for this function, but we need a dynamic matrix.
    The configurable widget is perfect, it only lacks this smart search kind of function for long lists (of names in our case).
    Thank you!!

  • PTD_180

    Hello,
    I need to remove the "Add" button.
    how can do this?
    Thanks

  • VpC2018

    I'm not able to have personalized CSS to work
    I add the following:
    .textarea {
    margin: 10px;
    width: 130px;
    }
    whatever number I use the text area is always the same form (asx without personal CSS).
    Thanks for any help
    Roberto

  • ESFA

    Can you set the width of a column using CSS?

  • ESFA

    Can you have the Radio Buttons in multiple columns?

  • pjwindow

    Everything shows up on the website, looks great. When it's filled out it works and shows up on Jot Form but doesn't get sent in the Email. What am I doing wrong??

  • OnlineDressageEntries

    This is nowhere near flexible enough for what I need. You MUST update this widget to remain competitive. For my project, multiples of the same thing are a core function, and I have 20 fields which may need to be duplicated in one large block. Dealing with the configurable list Widget is clumsy and inefficient... and it look awful and amateurish.
    Despite, the many great widgets that you offer, this one is so bad, and so important to my project that unfortunately I will have to use Cognito for their much better 'repeating section', despite their lack of flexibility around styling and so on.

  • SysCloudUS

    I love this - is there any way though I can make the entries more grouped instead of a big long row?

    Thanks

  • buffalotours

    HI team - I can't sort out how to narrow down the width of the configurable list? On desktop it appears fine, but it does not resize to mobile well, and the item is broken in the survey. Any advice on how to insert a "line break" in the configurable list?

  • bellajeannephoto

    Hello! I'd like to list products by category, then size. I want check off the size, and next to it have quantity of that product on that line. How would I do that? For instance it would look like this:

    ALBUMS

    Size Checkboxes: Quantity Dropdown
    8x8 1-5
    8x11 1-5
    10x10. 1-5
    12x12 1-5

  • gcfohl

    Hi there,
    How do I pass values via the URL to pre-fill form fields in the configurable list?
    Thanks!

  • HBSPASS

    This configurable list is Awesome. But, is there any way to move the "add" button to the same line (row) as the textbox fields? And subsequently for any "added" row for both the "add" and "remove" buttons to be side by side on the same rows also?

  • dirtydozen

    fantastic tool! how can i configure the width of any field? is it possible?
    tnx Alex

  • Fox_44

    Is there a way for me to ensure that only unique entries will be accepted in the number field?

  • canadaborderlaw

    I just want to use the Month and year of Date?
    Thanks

  • Michelle Douglas

    In the configure list, i want phone number to be a field. Is that actually 2 or 3 fields (for area code, exchange, etc) or can I format the field to be (_ _ _) _ _ _-_ _ _ _?

  • SEB17

    Cool. Question:
    How do I examine the value of a field? What I want is simply a column for UNITS and a column for PRICE/UNIT; I want to examine these fields and CALCULATE a column for TOTAL PRICE. Thank-you.

  • SLSLE

    Hi!
    I'm look to add extra rows based on a previous question. e.g. How many tickets do you wish to buy? [3], and then have the Configurable List generate 3 empty rows to be filled in?

    Thanks!

  • bbass328

    When using the 'static ' text, why doesnt a comma put the text on another line? how do you make a new line with the static text?

  • moolguy

    How do I add a field for text after someone selects 'Other (please specify)' as an option for drop-down or check box?

  • 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

    Thanks!

  • NEOSPARK

    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

    Hello,
    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

  • GRRRACE

    Hello,

    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

  • laurahonjas

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

  • laurahonjas

    Hello
    - 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?

    Thanks

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

    Thanks

  • SCAEEUROPE

    Hello,
    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;
    }
    Thanks

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