Understanding Conditional Logic

Conditional logic is the term used to describe showing and/or hiding form input fields based on a condition or set of conditions being met. As input values or selections are being made, the values are compared against the conditions in real time to determine if a field or field(s) should be either displayed or hidden. Conditional logic is considered an advanced feature by form builder companies and can be a complex feature to implement with traditional HTML forms.

Before we dive into the complexities of conditional logic, it is important to understand that the implementation of logic uses the CSS display property to hide and show fields. The CSS display property can be implemented by using other programming languages, such as JavaScript or a combination of CSS and JavaScript. Regardless of the programming language or syntax used to implement the display property, the key takeaway is that the end result is the same.

Conditional logic offers the benefit of changing a static form into a dynamic form, creating a better user experience, and increasing form security. For example, when a contact form asks the user if they prefer an email, SMS or a phone call in response to their inquiry, it makes logical sense that the following field accepts either a valid email address or a valid phone number but not both. Phone inputs and email inputs expect different values and formatting to pass validation. When using two different inputs, each input can have a unique label that accurately describes the expected value. For example, “Please enter a valid email address.”, or “What is the best number to reach you?”.

Input fields can have one or multiple “conditions,” but only one rule. A rule determines whether to show or hide a field, whereas a condition is used to determine if and when the rule is applied. In our previous example, we wanted to show either an email input or a phone input based on the user’s response to our question “Do you prefer an email or phone call response?”. In this example, we want to set up a “rule” on both the email input and the phone input to be hidden and add a “condition” to each input to become visible if the user selects the current field as their answer.

Conditional logic uses comparison operators to see if the condition has been met. When performing simple math, you may have a simple equation such as 2 + 2. In this case, the + is the comparison operator. All conditions require at least one comparison operator to work. Which are is, is not, includes, greater than, and less than. For each condition added to a rule, one comparison operator is used to evaluate whether the condition is either true or false. For example, show the phone input if the selection "is" phone. Where “is” is the comparison operator. At run time, the phone input will be hidden, and when the user decides whether they would like an email or phone response, the condition will check to see “if” the selection is phone.

The final aspect of making conditions work is understanding the “equals to” aspect. When building conditions, there will always be a value. It is this value that is used to determine if the condition is true or false, has been met or has not been met. For example, 3 + 3 = 4. In this example, the 4 is considered the “equals to” aspect. However, with conditional logic, you decide the “equals to” aspect and are not limited to numbers but can choose empty as the “equals to”, “blank”, or any other value that makes the logic suit what your forms need.