Select Field in CS Forms

Support
#1

Hi,

Thank you for the recent updates to the CS Forms.

One small suggestion I’ve got for future releases is related to hierarchical taxonomies. It would be great to have a choice to use small visual symbols for children of different levels inside Select Fields types. Dots and/or hyphens, for example. Right now, parent and child taxonomies look the same, but this isn’t always the best way to show them in Select fields.

If there is a workaround already with a use of TWIG or whatever, please suggest how to implement that. I believe that use of more than two levels of hierarchy is rare. So probably two symbols should be enough or there could be additional indents for more than two levels with the same symbol.

I also still have a question: how to force a reset state for Select fields? Right now, if you refresh the page and click any of the filters available in the form or even the Reset button, Select fields pick up the first values instead of being blank.

In other words, blank values for the Select fields are only applied on initial load of the form. At that point, the first values are visually selected but they are not really applied. If any element in the form is clicked it is no longer valid. I got confirmation of that when I switched to GET method for the form. There is no placeholder for Select fields so it would be visualy essential that nothing is selected there yet so we could choose them as the default value for Reset. Maybe I just miss something important. Please let me know if that is the case.

#2

Hey @referee,

About hierarchical taxonomies, there is no workaround unless with custom development which as you know is beyond the scope of our theme support. But, I’ll take this as a feature request.

About resetting the Select fields, in standard HTML, a <select> element will always default to selecting the first available option if no other option is explicitly marked as selected.

When you refresh the page or click “Reset,” the browser returns the form to its default state. Since there is no “blank” option at the top of your list, the browser is forced to pick the first one (e.g., “Option 1”). This also explains why the GET method sends that value; if the first option is the only one “selected,” its value becomes the value of the field.

The most direct way to fix this in the Cornerstone builder is to add a new Option element at the very top of your Select element’s children:

  • Label: “Select…” (or leave it blank if you want it visually empty).
  • Value: Leave this completely empty.

Because this is the first option, it will be the one selected by default on load and after a reset. When the form is submitted via GET, it will send an empty value (e.g., &my_field=) instead of “Option 1.”

There is no “Placeholder” field for Select elements in the builder. Even if you were to enable that control, the current render function doesn’t have the logic to convert that placeholder into an <option value=""> tag.