CS Forms fields conditional logic

[referee]

Hi,

I wonder how to set conditions for CS Form facets containers if the fields are dependent on each other?

Let’s say we have one Checkbox List inside an accordion item which uses taxonomy for sport disciplines. We also have other Checkbox Lists inside other accordion items that contain items related to the ages for each respective sports discipline independently. And we want to show the respective accordion items only based on discipline selected by the user in the first list. Is it possible?

[ruenel]

Hey John,

Thanks for posting in! Kindly provide the specific sports discipline and the Age in a table format so that we will have an idea or at least find a way to make it happen. You may also need a mock layout along with the page or layout where you have added the CS Form.

Best Regards.

[referee]

Hey @ruenel,

Here is the screenshot showing conditional relationships.

Third Checkbox List is the source for custom logic conditions. The following three Checkbox Lists are age categories for three disciplines listed in the Checkbox List above which need to be hidden until any of the disciplines are checked.

Here is my custom JSON with taxomomy labels for better understanding:

{
    "post_type"	 		 : "events",
    "event-season"		 : {{ url.param({"key":"event-season"}) | json_encode }},
	"event-month"		 : {{ url.param({"key":"event-month"}) | json_encode }},
	"event-discipline"   : {{ url.param({"key":"event-discipline"}) | json_encode }},
	"event-ages-sport"   : {{ url.param({"key":"event-ages-sport"}) | json_encode }},
	"event-ages-fight"   : {{ url.param({"key":"event-ages-fight"}) | json_encode }},
	"event-ages-beach"   : {{ url.param({"key":"event-ages-beach"}) | json_encode }},
	"event-level"		 : {{ url.param({"key":"event-level"}) | json_encode }},
	"event-country"		 : {{ url.param({"key":"event-country"}) | json_encode }},
	"event-ru"			 : {{ url.param({"key":"event-ru"}) | json_encode }},
	"s" 				 : "{{ url.param({"key":"search"}) }}"
}

[referee]

I understand that CS Form fields have Form Input Data conditions but they can only be applied to the form fields themselves. In my case, I have accordion items which nest CF Form Checkboxes. So probably this is a case for Theme.co Dev Team further evaluation. Maybe they can also add this type of condins to other CS elements which can be used as containers for the form fields. Sometimes you need to keep facets as compact as possible which is not always possible without accordion and maybe modals. But modals have even more specifics to make them work with the forms correctly.

From available element conditions, probably the most logical would be to use {{dc:url:param key="event-discipline"}} is item-label but it is not verified on the fly when facets are checked. We need to reload the page with respective URL parameters inside the link to make it happen.

[christian]

Hey John,

It is possible to set conditions to dynamically show or hide accordion items (or other container/elements) based on the user’s selections in a parent field like a Checkbox List.

Since Cornerstone Forms uses client-side logic to toggle visibility, you can achieve this in two ways:

Method 1: Using Custom Attributes (Recommended for Accordion Items/Containers)

The Cornerstone Forms frontend script automatically monitors any DOM element within the form that has the data-input-conditions attribute. You can add this attribute directly to any element—including Accordion Items or Group/Div containers—via Cornerstone’s built-in Custom Attributes settings under the Customize tab:

1. Select the respective Accordion Item or container element you want to show/hide.
2. In the inspector under Customize > Custom Attributes, add a new attribute:
   • Name: data-input-conditions
   • Value: A JSON string array specifying your condition:

     [{"subject": "your_checkbox_list_name", "value": "discipline_value"}]
     

     (Replace your_checkbox_list_name with the name attribute of your main sports disciplines checkbox list, and discipline_value with the value of the discipline that should trigger the visibility.)

Method 2: Using the Input Conditions Control

If the container element supports Cornerstone Forms’ Input Conditions controls out of the box, you can enable and configure the conditions directly within the editor:

1. Look for the Input Conditions section in the element’s settings panel.
2. Enable the toggle and define the rule matching the parent input’s name (e.g., form:input set to match the specific discipline value).

---

Your observation is correct regarding standard Cornerstone Element Conditions: using conditions like {{dc:url:param key="event-discipline"}} relies on server-side rendering, which means they will not react on-the-fly until the page reloads.

The client-side, on-the-fly logic you need is already built into the Cornerstone Forms Javascript engine, and it might work on container elements like Accordion Items when using custom attributes.

Here is how you can set it up:

Why this might work on Accordion Items

The plugin’s Javascript (specifically in cornerstone-forms.js) contains a global selector observer:

bt.attach("[data-input-conditions]", function(r, e) {
  let t = r.closest("form");
  // ...
  let s = gt(t, e), i = r.closest(".cs-form-input-container") || r;
  i.style.display = s ? "" : "none";
});

If you add data-input-conditions to an Accordion Item:

1. It is not inside a .cs-form-input-container, so the script defaults to target the Accordion Item element itself (i = r).
2. It listens to the form’s change event on-the-fly.
3. It immediately toggles display: none or display: block on the Accordion Item when checkboxes are ticked/unticked, without reloading the page.

---

How to apply this to your layout

For each of your age category Accordion Items, configure them as follows:

1. Accordion Item: Возраста (спорт)

• Select this Accordion Item in the editor.
• Go to the Customize tab and locate the Custom Attributes section.
• Add the following attribute:
  • Name: data-input-conditions
  • Value:

    [{"subject": "event-discipline", "value": "спортивное"}]
    

2. Accordion Item: Возраста (боевое)

• Select this Accordion Item.
• Under Customize > Custom Attributes, add:
  • Name: data-input-conditions
  • Value:

    [{"subject": "event-discipline", "value": "боевое"}]
    

3. Accordion Item: Возраста (пляжное)

• Select this Accordion Item.
• Under Customize > Custom Attributes, add:
  • Name: data-input-conditions
  • Value:

    [{"subject": "event-discipline", "value": "пляжное"}]
    

(Note: Replace "спортивное", "боевое", and "пляжное" with the exact taxonomy term values/slugs sent by your checkboxes if they differ from the labels).

[referee]

Thank you very much @christian,

The first method definitely works but with the term slug as the value instead of the label. I will need more time to experiment with all your proposed options. I really like your detailed guides as they help a lot to learn CS and Pro.

[christian]

You’re welcome, John. Let us know when you’re done testing.