Configurable List adding heading

insreting heading is not working

Static: Propperty details

Configurable List widget's Fields configuration:

https://form.jotform.com/251871710110849

Hi Alan,

Thanks for reaching out to Jotform Support. Let me help you with that:

The Configurable List widget does not support inserting a heading directly as a static element within the fields configuration. However, you can use the Static field type to add static text or labels inside the list, but it won't function as a heading above the entire widget.

If you want to add a heading or title above the Configurable List widget, you should add a separate Heading or Text element in your form builder above the widget itself.

For more customization, you can also use custom CSS to style the widget or add labels as needed.

Give it a try and let us know how it goes.

so what code do i use for a line with no fileds

Hi Alan,

To add a line with no fields in the Configurable List widget, you can use a Static field with an empty label or a simple dash (-) as the label. This will create a line without input fields.

If you want more control over the appearance, you can also inject custom CSS to style that line differently.

Let us know if you need help with the CSS code.

can show me example, also need help with css

Hi Alan,

Here is an example of a line with no fields in the Configurable List widget:

Static: -

This will create a static line with just a dash.

For CSS to style this line, you can add the following in the widget's Custom CSS tab:

.configurable-list-field-row:nth-child(n) {  background-color: #f0f0f0;  font-weight: bold;  padding: 5px;}

Replace nth-child(n) with the line number you want to style.

This CSS will highlight that line with a background color and bold text.

when using Static: -
it is showing a field box below

Hi Alan,

The field box appears below the Static: - because the widget treats it as a static field with an input box. Unfortunately, the Configurable List widget does not support completely hiding that box for static fields.

As a workaround, you can use custom CSS to hide the input box for that static line. For example, add this CSS in the widget's Custom CSS tab:

.configurable-list-field-row:nth-child(n) input {  display: none;}

Replace nth-child(n) with the line number of your static dash line. This will hide the input box below it.

If you want, I can help you with the exact CSS code if you provide the line number.

i need human to check this

Hi Alan,

A human support team member will take over and assist you further with this issue.

Hi Alan,

You need to access the Properties menu of the Configurable List widget to customize its header. Here's how to do it:

1. In Form Builder, click on the Configurable List widget and click on the Gear icon next to it to open its Properties menu.

2. On the right side of the page, click on the Advanced tab under the Properties menu.

3. Enter the title you want to set as the header of the field to the Textbox under the Field Label setting.

That's it, this will work as the header of that field. If you want to bolden it or increase the font size, you can use the CSS code below. Here's how to implement it:

1. First copy the code you see below:

.form-label.form-label-top {

    font-weight : bold;

    font-size : 22px;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

You can adjust the boldness and the font size from the code above, here's how it looks:

Give it a try and let us know how it goes.

Thanks

so, you cannot add sub heading to the sections

Hi Alan,

Yes, you're right, the Configurable List widget doesn’t support subheadings within its sections. It’s designed to display rows of input fields, but it doesn’t allow for grouped headers or section breaks inside the list itself.

If you need to visually separate sections, you can use static fields with custom CSS to simulate subheadings or consider splitting the form into multiple Configurable List widgets with separate headings above each one.

Let us know if there’s anything else we can help you with. 

it would be helpful if you read the threds and see that I tried using static

you can use static fields with custom CSS to simulate subheadings or consider splitting the form into multiple Configurable List widgets with separate headings above each one.

Hi Alan,

Unfortunately, the Configurable List widget doesn’t support adding subheadings like other standard fields. As a workaround, we can add custom subheadings above the sections using CSS. This allows you to display additional texts within each sections in the widget. Let me show you how:

1. First copy the CSS code below:

div.col1:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col2:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col3:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col4:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col5:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col6:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col7:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col8:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col9:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

div.col10:before {

content: "sample subheading" !important;

font-size: 15px !important;

}

2. Open your form in Form Builder, scroll down, and select the Configurable List widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

5. Click on Update button to save it.

That's it. Take a look at the screenshot below to see my result:

We also have a guide to help you learn How to Inject CSS Codes to Widgets

Give it a try and reach out again if you have any other questions.

how to you enter subheading

Hi Alan,

If you are referring to updating the subheading, you'll have to do that by directly modifying the CSS. At the moment, all texts will say "sample subheading." Here's how:

1. Open your form in the Form Builder, and click on the Wand icon next to the field.
2. From the right panel, choose Custom CSS tab.
3. Paste CSS my colleague provided in the previous reply.
4. Modify the text from here.

Give it a try and let us know how it goes.