Changing CSS According to Radio Buttons

Support
1

Hey! I am completely new to FM Better Forms, and I’m having trouble accomplishing my goals for my project. I apologize, I am pretty new to JSON and Javascript in general, so I would appreciate if someone could offer some beginner advice.

The project is to gather information for a new case for a law firm.

Basically, what I have is a 7 radio buttons determining a case type, and about a 40 fields asking for details about a case. Each different case type requires a separate, but overlapping subset of those 40 fields.

I am hoping to deemphasize the fields which are not related to the case type which was chosen by the user using CSS. I don’t want to make the fields which are not in use invisible, and I don’t want to make any fields required (as per project specifications).

First of all, I’m not even sure how to change the CSS of a snippet based on something like a button press. After that, is there a way to use conditional statements or some sort of logic to make that CSS change occur when some radio buttons are pressed but not others?

If my question isn’t specific or clear enough, let me know and I am happy to answer questions. I’m kinda lost and would really appreciate some help. :slight_smile:

2

Welcome to the community, Ben!

I’m not really sure if CSS is the right option for you here, but maybe I misunderstood how you currently have the form setup. Have you looked into using the visible_calc option (docs)? This will allow you conditionally show or hide an entire element based on the data of the page.

For example, if your radio button for “status” was defined with the values ['Open', 'Pending', 'Closed'] and you wanted to show a new field only when “Pending” was selected, the visible calc would look like

"visible_calc": "model.status == 'Pending'"

Feel free to post the relevant parts of your form schema to clarify what you’re trying to do and we can reply with examples better suited to your use-case!