Dropdown List Widget: Add an option to let responder add an item to the list

 I love the Configurable List Widget, but it appears due to limitations of the widget, I need an alternative method.

First, since you cannot put a widget within a widget, I can’t use the User Contributed dropdown, which in my opinion should be the standard dropdown functionality in any dropdown…an option at least. If this functionality was available in the list widget dropdown, that would be a start.

Second issue is the much requested ability to perform calculations/conditions on fields in this widget not being possible.

Before I seek help with a certain conditional thing, I will focus first on how to simulate this same functionality in my form. How do I set up a form, using normal fields and the User contributed dropdown, so they function the same way? All my fields neatly separated by columns in a single row with the + option button to add additional rows as needed that are empty, but configured the same as the first row (the basic functionality of the configurable list widget)?

Once this problem is solved, then I can worry about the complicated conditional statement and calculation stuff.

I am experimenting with other widgets, but you can see what I’m after on the form as it is, I think.

Thanks.

Hi Derek,

Thank you for reaching out to Jotform Support. Please allow me time to look into this. I will circle back once I have an update.

Hi Derek,

Thank you for patiently waiting. We apologize for the confusion on the Configurable List Widget. You can actually use this widget in almost anything. Please let us know what you are trying to accomplish on your form so we can check if it is possible. Below is an example of what a Configurable List can do.

That's it. Let us know if you have any other questions.

That example is great. How do I grab that to use in my editable form? Or, better yet, how do I add those items in the widget? This gives me a lot more flexibility now if I can do this myself.

Thanks!

After looking further at the example, I noticed the “Add option” list item in the dropdown doesn’t actually do anything. But I’m still interested in seeing the settings used in teh widget.

Hello Derek,

Thank you for getting back to us. You are free to clone this form so you can edit it depending on how you'd like it to be customized. We also have a guide on how to set up the configurable list widget on your form.

Reach out again if there’s anything else we can do for you.

That being said, it looks like I’m going to need help with the CSS settings to make the grid/table for the columns I need on the form.

After that, I’m guessing from reading other posts I’m going to have to use the collapsible section somehow to simulate the add a row functionality to my form?

Hi Derek,

Thank you for getting back to us. Sure. Let me know which part of the form you would like us to modify using CSS and how should it look like. Section Collapse Element is a great option as well. You can learn more about it by clicking on this link.

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

I got some of it figured out, but let’s address one thing at a time.

I have fixed the header the way i want it, except it does not show correctly in Tablet view, after shifting it to the left to appear correctly in Desktop view. I think it looks right in phone view, but with all of the scrolling necessary, it is hard to tell. I would like to have it fit on the screen without scrolling on all devices, if possible. I’m not sure how my change will work with responsive CSS code sample in the help document. Also, do I need to set the form to 3 columns rather than 4?

Where do I adjust the distance between the form header and the first row?

Thanks again.

Hi Derek,

Thank you for getting back to us. I cloned your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results:

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better? Once we hear back from you, we'll be able to move forward with a solution.

See screenshots.

Hi Derek,

Thank you for getting back to us and for the screenshots you provided. It really helps me identify what you want to accomplish in your form. Adjusting your header is easy. Let me show you how.

1. Open your Form Designer.
2. Click Advance Designer.
3. Click CSS Tab.
4. Delete the 9th line on the code that says left -37px.
5. Click Save.

Here's a screencast for your reference:

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

Now it is wrong on Desktop and phone. Setting width to 100% makes no difference either.

Hello Chaplainderekgodfrey,

Kindly add this CSS code:

.form-all{

max-width: 1000px;

}

It should show like this.

Let us know if you’re still having the same problem.

Form.header-group is still not aligning top and center and stretching the whole width. Obviously, when I delete all CSS entries in this section, it goes back to the default:

What I want is this:

And just out of curiosity, can we make the form with rounded corners using CSS? I know I used to could do it hand-coding a webpage years ago.

I would also still like to address my original question about emulating the Configurable List widget with traditional fields/widgets in a repeating/expandable section as also seen in this screenshot:

Thanks.

Hello Derek,

Thank you for getting back to us. I'll need a bit of time to work out a solution. I'll be back to you shortly.

Hello Derek,

Thank you for waiting. Would you like the widget to look like this?

If so, you have to inject custom CSS into the widget. Let me walk you through it, step by step:

• Click the wand icon to open the Widget Settings panel.
• Go to the Custom CSS tab.
• Enter this CSS code in the text area.

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

• Click the Update Widget button to save the changes.

Check out the screencast below to see how it's done:

Regarding how to make the form with rounded corners, you can do it inside the Advanced Designer. In Advanced Designer select the Design tab and under the Form layout, choose Rounded Corners. Don't forget to click on Save.

Regarding the fix of the Header's position, I'll get back to you on that.

Reach out again if there's anything else we can do for you.

First, thank you for your help. The form header position issue I figured out. Here is the solution:

.form-header-group.hasImage.header-default {

  width : 690px;

  position : relative;

  display : table-header-group;

}

The only issue is the fully rounded corners disappear on the top edge. Perhaps my above fix needs tweaking?

Second, What I really want to do with the configurable list is have the functionality of the User Contributed Dropdown widget in the Location Dropdown field. Reason one why I need to do it without the Configurable List widget. Reason number two is I will be asking for help doing conditional/calculation on the Service Heading dropdown. I really hope this is clear now what I am asking for.

Third, thank you for the CSS for the widget…I will need to tweak it a bit, but that is pretty cool.

Hello Derek,

Thank you for getting back to us. Please allow me time to look into this. I will circle back once I have an update.

Hi Derek,

Thank you for patiently waiting. I have figured out the right code. On your Form Designer. Please remove

.form-header-group.hasImage.header-default {

  width: 690px;

  position: relative;

  display: table-header-group;

}

And use this instead.

.form-header-group.hasImage.header-default {

  border-top: 1px solid transparent;

  border-radius: 15px 15px 0 0;

  margin: 0px !important;

}

Here's a screencast for your reference:

As for the user-contributed dropdown in a configurable list widget, it is not possible, and no workaround other than using individual fields and aligning them with CSS. The drawback of this is not having an option to add more rows. Give it a try and let us know if you need any help.

Thanks for the CSS fix in the Header. The Advanced Designer is a pretty good tool.

As for the rest, I figured it would need to be done in CSS, which I would probably need help with. But I really need to find a way to add more rows. Is there no way to do programmatically with conditional logic or something? Can this be made a feature request? I don’t have a problem using multiple sections to achieve this (can the form even be broken into actual sections?)

Thanks.

Hi Derek,

Thanks for reaching out to Jotform Support. Unfortunately, the feature you're looking for isn't available at Jotform right now. We've gone ahead and escalated your request to our developers, but when or if it's developed depends on their workload, how viable it is, and how many other users also request it. If there are any updates, we’ll circle back to this thread and let you know.

Thanks for your patience and understanding, we appreciate it.

In the meantime, I need a bit of help on the custom CSS in the configurable list. Can I place my checkbox to the left of the Location text field on the same line? I would also like to have the Hours and Travel fields on the same line.

Also, is there a way to do any conditional logic or calculations within the configurable list?

Thanks.

Hi Derek,

Thanks for reaching out to Jotform Support. We need a bit of time to look into this, we'll get back to you as soon as we can.

Hi Derek,

Thanks for waiting.

Can I place my checkbox to the left of the Location text field on the same line? I would also like to have the Hours and Travel fields on the same line.

Same width, use: td.col3, td.col4 { display: inline-block !important; width: 50%; } Individual width adjustment: td.col3, td.col4 { display: inline-block !important; } td.col3 { width: 40% } td.col4 { width: 60%; } 

Is there a way to do any conditional logic or calculations within the configurable list?

I'm afraid that there is no option to calculate values in fields that can be added to the form dynamically. Our widgets use a separate script to work and that is why it is not possible to implement calculations to the values of the widget.

Reach out again if you need any more help.

Where do I inject that code? In the widget CSS or the form CSS? Which part of the existing code comes before and after?

Thanks.

Hello Derek,

Thank you for getting back to us. Please inject the custom CSS into the widget. To use the same width, inject this CSS code below the existing one:

td.col3, td.col4 {

display: inline-block !important;

width: 50%;

}

For individual width adjustments, you may inject these codes into the widget:

td.col3, td.col4 {

    display: inline-block !important;

}

td.col3 {

    width: 40%

}

td.col4 {

    width: 60%;

} 

Reach out again if there’s anything else we can do for you.

Need help fixing this:

I have the form setup as two column now. How do I get the Location and Service Heading drop downs to line up together on one line (I would prefer to have Location on the left and Heading on the right)? I have used the arrow controls on the fields to move them up or down and they are shrunk. Likewise, I would like to do the same with Hours Served on the left and Travel on the right in the same line. As you can see, the Community Service Total and total hours are correct.

Is there a way to make this a separate section that can be copied easily and repeated multiple times (pasted?), since I can’t add rows dynamically without using the Configurable List widget?

In this section, I would prefer the month and company fields to be in the same line. When I had them shrunk and in the Same line, they did not work quite right in phone view, so I did it this way. The other issue here is appears to me the spacing is bigger where the arrow is between company name and name fields than the Month/Year and Company Name fields. I know that might be nitpicking.

Your help has been great so far with tweaking the CSS and if you can help with these issues mentioned here, that would be awesome. Thanks.

Any ideas? I did add a calculation field that helped a bit, but I’m confused why the alignments get all weird to begin with.

Thanks.

Hello Derek,

Thanks for getting back to us. I've reached out to my colleague who is currently working on it. Once he has an answer, he'll get back to you on this thread.