When You Need Form Conditional Logic (And When You Don’t)

If the app you’re building relies on long, substantial forms with numerous fields, then yes.

Chances are, at some point it’s going to get cumbersome for the user if you don’t start implementing some conditionals.

All form conditional logic does is change how a form appears to users based on selections and inputs they’ve previously entered. It’s the implementation of “If/Then” logic—in a form.

For example, IF I select the choice “food” from a drop box, THEN another drop down box appears with a sample of food selections I can make.

The nice thing about it is that this newly appeared field wasn’t there until the user needed it.

That’s efficient.

Usually.

What do I mean?

Consider a form with a drop down box that has just 2 options. If you choose the first option, nothing special happens, you just made a selection. If you select the second, an additional drop down box appears with three additional selections.

Okay.

In this case, the form designer could have simply put all 4 options in one drop down box and called it a day.

BUT, chances are you’re dealing with a lot of fields and you already know you need this feature—and you don’t want to build the logic from the ground up.

Custom Code

If you were to build the form conditional logic from scratch, you’re looking at spending a sizeable amount of time writing the code, testing the forms, and fixing bugs. That’s just the nature of them.

Which is why form builders are a thing. With a bit of drag and drop and a few selections, you can build a functional form with some basic conditional logic and you’re good to go. Right?

Theoretically, but there are other prices you must pay if you opt in to using a form builder. So which one do you choose? Good question. I mention a number of things to consider in this post here.

In addition to those considerations, Form.io has always let you implement your own custom JavaScript into the form (using the form builder) so that you were never limited by the available options.

And I’ll be honest, those options used to be pretty limited before, but the feature recently underwent a significant upgrade.

The nice thing about our longstanding custom JavaScript feature is if you still need to deploy custom JavaScript, you can do so in Form.io itself so that it remains in proximity to the form that it modifies.

No need to write a function in your app to handle form conditional logic and then 6 months later try to remember what that function was modifying.

More Conditional Logic With Less Code

So what can you do now that wasn’t possible before?

• Show/hide fields based on meeting ANY or ALL conditions
• You can now set multiple and nested conditions to achieve multi-layered logic
• Conditions can be triggered by a specific value, whether or not a field is empty, and a number of other dynamically loaded options that are relevant to the field component you’re working with

How Does It Work?

It’s all about showing and hiding fields—yes that’s really the crux of it.

Within the Developer Portal, you can edit most any field and find the Conditional tab at the top:

• Show or Hide this field: Pretty straight forward. The field can be set to be hidden or not at the start and then change its visible state based on what you select—when the conditions are met.
• When: All conditions are met, or just one that you list?
• Conditions: The Condition section is the workflow that will execute the settings mentioned above. When the +Add Condition button is clicked, the following fields will be available to configure the condition:

• When [In the condition]: Let’s you select which component (field) in your form will execute the condition.
• Is: Here you will select a list of operators that determine what the status of the field value should be before the condition is executed.
• Value: The data entry of the field to execute the condition. When the conditional field has static values, like the Radio or Select components, those options will be available within a dropdown field to select as the Value.

In the example below, there’s an email field that should only display when a Checkbox is ticked and a certain value of a Radio component is selected. We have added two conditions, one for the checkbox and one for the Radio, to trigger the workflow when both conditions are met: 

Here’s a 2-minute video that demonstrates how to set up form conditional logic: