Designing a Drop Down field

Forms Public Forms
1

Dear Support Team,

We have observed that our current design of the 'Category' dropdown field in our online ticket system is perceived as overly complex and cumbersome by our users. Many have expressed concerns that the field is too small and the abundance of options makes it difficult to locate the desired category.
Is there a way to make it easier to read? For example more collumns at once or some kind of structure for all of the topics?

image
image829×291 7.71 KB

We got it like this right now.

The use has to choose one of those categorys and the fields which need to be filled appear or disappear.
image

I also created a list as an alternativ with a html-element, but i couldn't get the value out of it.
I had an idea of reading the value on mousclick and filling it in the 'category'-field.

image

image
image501×604 14.6 KB

We are open to any additional suggestions or best practices you might have to address this issue. Our goal is to optimize the usability of our ticket system to ensure an efficient and user-friendly experience for all users.

Thank you for your support!
Best regards
David

2

Hello @David1,

The first that came to my mind is that you can make the drop down longer so user can see more categories at once:

fd.field('Field1').widgetOptions = {
   height: 500
}

The idea with the HTML table and populating the Category field when user clicks on the link is good too. You can add onclick property to the link like so:

<a id="demo" href="#" onclick="populateCategory('Value1')">Value1</a>
<a id="demo" href="#" onclick="populateCategory('Value2')">Value2</a>

and the fnction to the JavaScript editor:

window.populateCategory = function(option){
    fd.field('Field1').value = option;
}

Another option is to create a cascading drop-down, then the user will select the top-level category (Software) first, and see subcategories (Access, Excel) in the next drop-down list. This is the example of the code:

var categoryObject = {
  "Front-end": ["Links", "Images", "Tables", "Lists"],
  "Back-end": ["Borders", "Margins", "Backgrounds", "Float"]
}

var categoryLevel1 = [];

for (var x in categoryObject) {
    categoryLevel1.push((x))
  }

fd.field('DropDown1').widget.dataSource.data(categoryLevel1)

fd.field('DropDown1').$on('change',(value) => {
        fd.field('DropDown2').widget.dataSource.data(categoryObject[value]);
})
3

Hello,
Thanks for your respond. I tried to implement the height like you have it in your code, but this dosent work for us. We also tried it to put it directly in the "Style"-option of the field but it didn't work neither.

I tried the second way and it worked perfectly. Thanks!
We will use this solution.

Best regards
David

1 Like