How to Set Up the Configurable List Widget

November 9, 2022

The Configurable List widget requires a little more to set up, but it’s not hard at all. This guide shows how to use and set up the Configurable List widget.

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, click on Add Form Element on the left.
  2. Next, choose Widget in the left panel.
  3. Search and add Configurable List to your form.
form-builder-add-configurable-list-min.png
  1. In the Widget Settings panel on the right, define your fields in the Fields configuration section.
form-builder-configurable-list-settings-min.png

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.

form-builder-configurable-list-required-fields-min.png

Your form fillers will only be allowed to submit the form if the required fields are filled.

Setting Up Other Configurations

Scroll down in the Widget Settings panel on the right, under the General tab, to see more options to configure the widget.

form-builder-configurable-list-other-options-min.png

Here’s the list of the other 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 custom CSS.

form-builder-configurable-list-css-min-1.png
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: