Forms

Other articles in this category

Search More Content

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Enable Conditional Logic For A Form Field

Introduction

The Enable Conditional Logic option in the field settings allows you to create rules to dynamically display or hide the field based on values from another field. In order to use conditional logic, you will need to add a field to your form which supports conditional logic.

After enabling conditional logic for a field, you will have the option to show or hide the field depending on whether all/any of the conditions you specify are met. You can specify additional conditions by clicking the plus icon to right of the conditions. Clicking the minus sign will remove the corresponding condition.

Basic Conditional Logic Example

In this example, we will use conditional logic to show different products based on a parent category. A dropdown field will determine what products may be purchased based on the current selection.

  1. First, set up your fields. As we will be using a dropdown to handle the display of various products, start off by creating a single dropdown, a few product fields, and a total field to display the order total. In this example, we have created 3 different options within the dropdown for Jeep, Ford, and Honda, as well as product fields such as Wrangler, Cherokee, and Mustang.
  2. As we want Jeep models to show up when Jeep is selected, Ford models when Ford is selected, and Honda models when Honda is selected, we will need to enable conditional logic on each of these products. Open the options on one of your products by clicking on the field, and click on the Advanced tab.
  3. Within this tab, you should see a checkbox labeled Enable Conditional Logic. If you check this checkbox, the options to conditionally display or hide this field will be shown.
  4. On each of your products, simply enable conditional logic, and use the dropdowns to only show when your dropdown equals the desired selection. For example, for our Wrangler product, we have set it to only show if the Option field equals Jeep.

That’s all there is to creating basic conditional logic within products. You should now be able to conditionally show or hide fields based on other fields in your form.

Conditional Logic Example using Sections

In this example, we will use conditional logic to show different sections of a form based on the user’s input. A radio button field will determine which form section displays based on the current selection.

  1. As we will be using a radio button field to handle the display of the sections, start off by creating a single radio button field. In this example, we have created 3 different options within the radio button for Cat, Dog, and Fish.
  2. Next you will need to create the different sections of the form using the Section field. Create the 3 sections of Cat, Dog, and Fish with the necessary fields under each section break. In this case we used Single Line Text, Number, and Paragraph fields.
  3. As we want the Cat section to show up when Cat is selected, Dog section when Dog is selected, and Fish section when Fish is selected, we will need to enable conditional logic on each of these sections. Open the options on one of your sections by clicking on the field, and click on the Advanced tab.
  4. Within this tab, you should see a checkbox labeled Enable Conditional Logic. If you check this checkbox, the options to conditionally display or hide this field will be shown.
  5. On each of your sections, simply enable conditional logic, and use the dropdowns to only show when your dropdown equals the desired selection. For example, for our Cat section, we have set it to only show if the radio button field equals Cat.

Limitations

  • As mentioned above in the introduction, conditional logic rules must be based on values from another field, configuring conditional logic to display or hide a field based on its own values is not supported.
  • Fields hidden by conditional logic are ignored on form submission, this is one of the main reasons to use conditional logic and can’t be changed. This means fields hidden will be not available for any process done after form submission (e.g. Calculations) and not saved in the entry.
  • Certain special characters, like pipe (|) greater than and less than ( < > ) or HTML tags in field values, can prevent conditional logic rules to work as expected. To avoid this problem when using a field with predefined choices, like a Drop Down or Radio Buttons field, we recommend enabling the “show values” setting in the field and ensure you use only plain text in the Value column for the choices, without any special character or HTML tags.
  • Nested conditional logic. A field should not have conditional logic based on a field that also has conditional logic.

Performance

Conditional logic evaluation is done at client side (the browser) using JavaScript, and unfortunately browsers are not super fast doing these tasks. The browser has to process all fields to evaluate conditional logic and know which fields to display/hide, along with any other JS scripts that you may have in the page. Also some conditional logic use cases can add extra work to the browser, e.g. If you’re using conditional logic to show/hide a field and also using this same field as value in another field conditional logic that would make the browser to be constantly checking both fields rules, creating a loop and increasing the CPU resource usage of the browser.

This means if you have a huge form with lots of fields you may experience slowness in the form displaying or usage, this is something expected due to the explained above. The only workaround for improving the conditional logic performance in this case would be to reduce the number of fields or split your form in many smaller forms.