How to Set Up the Configurable List Widget

Last Update: 

With the Configurable List widget, you can define and display a set of fields or questions on your form. Your respondents can then add and answer as many of those fieldsets on your form as you allow. This is ideal for asking a set of questions multiple times.

Setting Up the Widget

Here’s how to set up and configure the Configurable List widget:

  1. In Form Builder, select Add Form Element in the upper-left corner.
An arrow pointing to the Add Form Elements button in Form Builder
  1. In the Form Elements pane on the left, select Widgets at the top.
An arrow pointing to the Widgets tab in the Form Builder's Form Elements pane
  1. Now, search and select Configurable List.
Arrows highlighting the Configurable List widget in Form Builder's Form Element pane
An arrow pointing to the Configurable List widget's wand icon -- to open Widget Settings -- in Form Builder

After adding the widget to your form, its settings pane should show up on the right side. If not, click on the widget’s wand icon to open Widget Settings.

  1. In the Widget Settings pane on the right, define your fields in the Fields configuration area.
A highlight to the Configurable List widget's Fields Configuration option in Form Builder

Note: Field declarations should be separated by a line break.

Here’s the list and syntax of supported field types that you can use in your dynamic list:

text

Accepts single-line plain texts.​

[label]:text[:placeholder]

Examples:

  • Name: text
  • Email: text: Type here…

number

Accepts numbers only.

[label]:number[:placeholder:step,min,max]

Example: 

  • Quantity: number
  • Age: number: Enter your age
  • Rating: number:: 1, 1, 10

textarea

Accepts plain texts and line breaks.

[label]:textarea[:placeholder]

Example: 

  • Notes: textarea
  • Comments: textarea: Type here…

A list of options in a drop-down list.

[label]:dropdown:option1[,option2,...:placeholder]

To have one of the options selected by default, replace placeholder with one of the options on your list.

Examples:

  • Pizza: dropdown: Cheese, Pepperoni, Sausage
  • Size: dropdown: Small, Medium, Large: Please select
  • Drink: dropdown: Apple, Orange, Pineapple: Orange

radio

Single Choice (radio button) — select one of the available options.

[label]:radio:option1[,option2,...]

Examples:

  • Order: radio: Pick-up, Deliver
  • Vegetable: radio: Carrot, Radish, Broccoli

checkbox

Multiple Choice — check off available options.

[label]:checkbox:option1[,option2,...]

Examples:

  • Addons: checkbox: Soda, Salad, Fries
  • Sauce: checkbox: Sweet, Sour, Spicy

dateInput

A date picker with calendar pop-up.

[label]:dateInput[:format]

If the date format is undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish.

Examples:

  • Date: dateInput
  • Date of Birth: dateInput: m/d/y

timeInput

A time selector.

[label]:timeInput:format[,now] 
  • The allowed format values are 12 (with AM/PM selector) and 24. If invalid, it defaults to 12.
  • To set the current time as default, append “,now” to the declaration.

Examples:

  • Arrival Time: timeInput: 24
  • Current Time: timeInput: 12, now

date

A three-field date picker.

[label]:date[:format:range:today]
  • If the date format is undefined or invalid, it defaults to y/m/d. You can interchange the letters as you wish.
  • The year range is formatted as start-end (e.g., 2015-2025). If undefined or invalid, it defaults to 10 years back up to the next year.
  • To set the current date as default, append “:today” to the declaration.

Examples:

  • Date of Birth: date
  • Arrival Date: date: m/d/y: 2025-2030
  • Date: date: d/m/y:: today

time

A three-field time selector.

[label]:time[:format,now]
  • The allowed format values are 12 (with AM/PM selector) and 24. If undefined or invalid, it defaults to 12.
  • To set the current time as the default, append “,now” to the declaration.

Examples:

  • Arrival Time: time
  • Current Time: time: 12, now

static

Display a message or text.

[label]:static:[text]

You can include some basic text-related HTML tags.

Examples:

  • Note: static: We are open 24/7.
  • Tip: static: Click on the <strong>Add Row</strong> button to add more.

Setting Fields as “Required”

To prevent your form fillers from skipping mandatory fields, you can set them as “required” by adding an asterisk (“*”) at the beginning of the field declaration.

An arrow pointing to the asterisk prefix in the Configurable List widget's configuration

Your form fillers won’t be able to submit the form as long as the required fields are empty.

Setting Up Other Configurations

In the Widget Settings pane on the right, scroll down past Fields configuration under the General tab to see more options to configure the widget.

The Configurable List widget's additional options in Form Builder

Here are the available options:

  • Minimal rows number — The minimum number of fieldsets to display on your form.
  • Maximal rows number — The maximum number of fieldsets allowed on your form. Zero stands for unlimited.
  • Label for Add — The text to appear in the “add” button.

Changing How the List Looks

It’s 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 your custom CSS codes.

To apply custom CSS

  1. Select the widget’s wand icon to open Widget Settings.
  2. In the Widget Settings pane on the right, go to the Custom CSS tab.
  3. Enter your custom CSS codes in the textarea.
  4. Once you’re done, select Updated Widget at the bottom to save your changes.
Steps to add custom CSS in the Configurable List widget
Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Inalde - Profile picture
  • Akilah James - Profile picture
  • Craig Stokes - Profile picture
  • xnergalx - Profile picture
  • Roshan Upadhyay - Profile picture
  • Breanna Everingham - Profile picture
  • Julissa Bonds - Profile picture
  • Valentin mandric - Profile picture
  • tracey selingo - Profile picture
  • Adrian - Profile picture
  • Cheung - Profile picture
  • AnaLuizaRems - Profile picture
  • BoatyardBee - Profile picture
  • BC - Profile picture
  • Karina Charro - Profile picture
  • sarasjcc - Profile picture
  • silver singh - Profile picture
  • Alex Stroud, Realtor - Profile picture
  • silver singh - Profile picture
  • Courtney Baker - Profile picture
  • Rasvinder - Profile picture
  • Shenk Wen - Profile picture
  • solbena Nsolotshi - Profile picture
  • Easy Access Tecnologia S/A - Profile picture
  • Lars Göran Lasses - Profile picture
  • Khaled Assaf - Profile picture
  • Rene Verhaeg - Profile picture
  • Helena Turner - Profile picture
  • David Holthaus - Profile picture
  • Servei Colònies de Vacances - Profile picture
  • RD Graham Electric - Profile picture
  • Willem de Wet - Profile picture
  • Kurdish Apps TM - Profile picture
  • Kerry Atkin - Profile picture
  • Lost Valley Community - Profile picture
  • alex marrs - Profile picture
  • Victor Moreira - Profile picture
  • Rich Cicconetti - Profile picture
  • Quality Assurance - Profile picture
  • Widdra - Profile picture
  • Events Membership - Profile picture
  • Tammy Taketa - Profile picture
  • Karin Noll - Profile picture
  • Ana Lucia Cruz Ruiz - Profile picture
  • SAICO - Profile picture
  • SAICO - Profile picture
  • Linda Ronco - Profile picture
  • David Lavoie - Profile picture
  • Wiemeyer, Peter F. - Profile picture
  • Alex - Profile picture
  • Osama - Profile picture
  • Katlen Rocha - Profile picture
  • Corporate - Profile picture
  • April Cox - Profile picture
  • Corporate Electric Ltd. - Profile picture
  • Aleš Bárta - Profile picture
  • Sherif Maximoss - Profile picture
  • tonny anggoro suwarsono - Profile picture
  • Brett Watson - Profile picture
  • RD Graham Electric - Profile picture
  • Claudia Oberlin - Profile picture
  • GroceryMom - Profile picture
  • Loreta - Profile picture
  • tiiberius - Profile picture
  • Carrie Gerbitz - Profile picture
  • Claudio G. Lutterbeck - Profile picture
  • Rick Brown - Profile picture
  • Eric Kulbeck - Profile picture
  • margkng - Profile picture
  • Hodaya OPTECH - Profile picture
  • Narit - Profile picture
  • HR IGM - Profile picture
  • Rocky Seftel - Profile picture
  • ŞENER - Profile picture
  • EdTech - Profile picture
  • Ana Lucia Cruz Ruiz - Profile picture
  • Accur Digitus - Profile picture
  • ANDRES GOMEZ - Profile picture
  • Shaun Teaurima - Profile picture
  • Evan Hawman - Profile picture
  • Nacional - Profile picture
  • Matt - Profile picture
  • Namrata Chakraborty - Profile picture
  • The Hon AES Bathurst - Profile picture
  • Biswadeep Mukherjee - Profile picture
  • Cliff Digital Media - Profile picture
  • Gillian Misiewicz - Profile picture
  • Brett Harris - Profile picture
  • Jason Prestosh - Profile picture
  • Enrollment Alliance - Profile picture
  • Emory DPT - Profile picture
  • Mark Lees - Profile picture
  • Matt RFS - Profile picture
  • Facultad de Arquitectura y Diseño - Profile picture
  • Buvvas - Profile picture
  • iFix Egypt - Profile picture
  • Guy Lambert - Profile picture
  • Yuri Cristan de Lima - Profile picture
  • Nina - Profile picture
  • Nina - Profile picture
  • Fernando Morales - Profile picture
  • muf-design - Profile picture
  • Jose Mena - Profile picture
  • GET IN CANADA - Profile picture
  • Jaime Garcia Segovia - Profile picture
  • Daniel Pontzer - Profile picture
  • Jyrki Väyrynen - Profile picture
  • CMMB SLC - Profile picture
  • dadform - Profile picture
  • Roberto Manguel - Profile picture
  • Dimitris Platitsas - Profile picture
  • Jenny Jones - Profile picture
  • CFA S.R.L. - Profile picture
  • AZDBAdesze - Profile picture
  • Maxime - Profile picture
  • Herby Raynaud - Profile picture
  • Maxime - Profile picture
  • Maxime - Profile picture
  • Ali Abdul Bary - Profile picture