How to Set Up the Configurable List Widget

June 23, 2022

Overview

The Configurable List widget requires a little more to set up, but it’s 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:

  • The Widget dynamically adds a set of fields on your form as a list
  • You can add as many rows as possible
  • You can define the type of data or information that can be collected for each dynamically added row on the list
  • To restrict the type of information that can be collected, you need to define field types

The following field types are allowed in the configuration for each row on the dynamic list:

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 element’s Wiget Settings (wand) icon in the Form Builder.

form-builder-configurable-list-widget-settings-min.png

We have prepared a list that will guide you in setting up your dynamic list through this widget. Let’s begin with the list of field configurations.

Field Types

text

Accepts plain text.​

{label}:text:{placeholder}

Example:

  • 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: from 1 to 10: 1, 1, 10

textarea

Accepts more text in paragraphs or narrations.

{label}:textarea:{placeholder}

Example: 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 the {placeholder} with one of the options on your list.

Example: Fruits: dropdown: Apple, Banana, Mango, Orange: Banana

radio

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

{label}:radio:{option1},{option2},{...}

Example: Size: radio: Small, Medium, Large

checkbox

Multiple Choice – check off available options.

{label}:checkbox:{option1},{option2},{...}

Example: Addons: checkbox: Eggs, Salad, Fries

date

A date selector with a pop-out calendar.

{label}:date:{format}:{range}

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, defaults to a range of ten years ago from now to next year from now.

Example: Date of Birth: date: m/d/y: 2000-2020

time

A 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 default time, append “,now” to the config.

Example: Arrival Time: time: 12, now

static

Display a message or text.

{label}:static:{text}

Example: Important Message: static: Click on the ‘+’ button to add a new row.


The list above looks a little scary, however, it’s quite easy. Here is a sample configuration:

configurable-list-sample-config-min.png

This is what the configuration will show on your form:

pizza-time-configurable-list-min.png

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

Enter the number in the Maximal rows number input box to limit the number of rows that will be added to your form.

To automatically load a number of rows, enter the number in the Minimal rows number field.

Min/Max Rows

To change the buttons’ text (add and delete row), set them in the following input boxes:

Button Labels

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 mandatory fields, you need to set the field as required by adding an asterisk (*) before the field configuration as shown below:

configurable-list-required-field-min.png

Your form users will only be allowed to submit the form if those fields are completed:

pizza-time-configurable-list-required-min.png

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.

form-builder-configurable-list-css-min.png

The Custom CSS part can look a little too technical – but not to worry – we would love to help – just let us know.

If you want to make the Configurable List widget mobile responsive, check out the guide on How to Make the Configurable List Widget Mobile Responsive.

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!

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:

  • Rocky Seftel
  • ŞENER
  • EdTech
  • Ana Lucia Cruz Ruiz
  • Accur Digitus
  • ANDRES GOMEZ
  • Shaun Teaurima
  • Evan Hawman
  • Nacional
  • Matt
  • Namrata Chakraborty
  • The Hon AES Bathurst
  • Biswadeep Mukherjee
  • Cliff Digital Media
  • Gillian Misiewicz
  • Brett Harris
  • Jason Prestosh
  • Enrollment Alliance
  • Emory DPT
  • Mark Lees
  • Matt RFS
  • Facultad de Arquitectura y Diseño
  • Buvvas
  • iFix Egypt
  • Guy Lambert
  • Yuri Cristan de Lima
  • Nina
  • Nina
  • Fernando Morales
  • muf-design
  • Jose Mena
  • GET IN CANADA
  • Jaime Garcia Segovia
  • Daniel Pontzer
  • Jyrki Väyrynen
  • CMMB SLC
  • dadform
  • Roberto Manguel
  • Dimitris Platitsas
  • Jenny Jones
  • CFA S.R.L.
  • AZDBAdesze
  • Maxime
  • Herby Raynaud
  • Maxime
  • Maxime
  • Ali Abdul Bary