User Guide

 

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

144 Comments...

See all comments
  • marcelocant

    Hello,
    Can I change the line separator for the Excel report?
    Thanks

  • cformation

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

  • YWCA_Hamilton

    Hello,

    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: http://w-68509-33527-11809.47903452.sites.hk31.qifeiye.com/?page_id=10753#header
    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?

    Thanks!

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

    Regards,
    Glovian

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

  • 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 xxx@yyy.com if not send to aaa@yyy.com

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

  • Elsa

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

  • Primasia

    How to have different text in different row?

  • 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

    https://form.jotformeu.com/71356016823352

  • 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

  • wayfarer

    Can I add sublabels?

  • knowledgehutsg

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

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

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

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

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

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

  • Willis1776

    My form is https://form.jotform.us/61104949477160

    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.

    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?

    Thanks,
    Diana

  • 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

  • beby21

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

  • 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"]
    {
    width:450px;
    }
    -----------------------------

  • 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' info.help button for this component so they could get a popup showing a description of each field in the row.

    Thanks.

    Burt

  • 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. https://form.jotform.co/70134945517861

  • harvardyearbook

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

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

  • franco@universalgenetics.com

    Is there a way to configure:
    dropdowns
    textboxes
    textarea

    to be aligned to the left?

    Thank you

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

  • MarianaCCForm

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

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

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

    Thanks!

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

  • skinnytrans

    Hi,

    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

  • bsalcpt

    delete entry does not show up in the row

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

  • 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