Conditional fields

Basic Conditional Actions

This page will explain how the conditional system works in ez Form Calculator for WordPress. The plugin allows you to perform the following actions:

• Show or hide elements (or the submit button)
• Set values dynamically
• Activate or deactivate elements
• Redirect the user to a different page (or any other URL)
• Set email targets depending on the value

By default, each conditional element compares their value with the compare value. If the condition is true, the conditional action will be performed and the respective counter-action will be performed automatically.

List of conditional operators and actions

Video Tutorial

Conditional WordPress Form Examples

Show and Hide Elements

Form Example

 

How it works

Open the Radio element and scroll to Options.

This Radio element contains two options: A (value 0) and B (value 1). It has four separate conditions which will take place as soon as the user selected a radio option.

All conditional actions are shown in the Conditional section in any element.

The Radio element works as follows:

• If the user selects option A, element Radio A and Numbers A will be shown.
• If the user selects option B, element Radio B and Numbers B will be shown.

The conditional section reads like this:

1. Show element Radio A if this element’s value equals 0
2. Show element Radio B if this element’s value equals 1
3. Show element Numbers A if this element’s value equals 0
4. Show element Numbers B if this element’s value equals 0

You do not need to add a Hide action for every Show action since the plugin performs the relevant counteraction automatically.

For calculations, make sure to set the element option Calculate_when_hidden to No so hidden elements will not be taken into the calculation routine.

Show and Hide Subordinate Elements

Form Example

 

How it works

This example shows how you can create a form with multiple conditions to show and hide subordinate elements. This is useful if you want to show different subcategories for a product, for example.

In this form, subordinate elements are shown when the parent element is visible. The form works like this:

The form is set up like this:

• Radio handles the conditions to show element A or B
• Element A handles the conditions to show radio elements A1 or A2
  • A1 is shown if A1 is selected and Element A is visible
  • A2 is shown if A2 is selected and Element A is visible
• Element B handles the conditions to show radio elements B1 or B2
  • B1 is shown if B1 is selected and Element B is visible
  • B2 is shown if B2 is selected and Element B is visible

This way, the subordinate elements of Element A and B are only visible if the parent element is visible, too.

In order to set up the conditions like this, you need to a conditional chain row so multiple conditions will be checked if an action should be performed or not:

The above screenshot shows the conditional section of element A. It contains two conditional rows to show the subordinate elements A1 or A2.

OR Condition

The dropdown element consists of 4 different options as seen below. Depending on the selection, it shows the radio element Product 1, Product 2 or both.

If the user selects option 1, Product 1 will be shown.
If the user selects option 2, Product 2 will be shown.
If the user selects option 3, both Product 1 and Product 2 will be shown.
If the user selects option 0, all counter-relevant actions will be done, i.e. hide Product 1 and Product 2.

The conditional section reads like this:

1. Show element Product 1 if this element’s value equals 1 OR 3
2. Show element Product 2 if this element’s value equals 2 OR 3

The marked checkbox in the image indicates that the conditional action will be done if any of the conditions are met. You can add multiple conditions with the blue plus button.

Conditional Actions for the Submit Button

Form Example

 

How it works

This example shows how you can perform conditional actions on the submit button.

The checkbox element consists of two options and two conditional actions:

• Show submit button if option value 1 is selected
• Activate submit button if option value 2 is selected

The opposite actions take place automatically:

• Hide submit button if option value 1 is not selected
• Deactivate submit button if option value 2 is not selected

Multiple Conditional Actions on a Single Element

Since multiple conditional actions could cancel each other if applied on a single element, the advanced option No auto toggle comes to the rescue.

Many conditional actions will perform their opposite conditional action in case the condition is not true. For example, if a conditional action shows an element if a condition is true, it will hide the element if the condition is not true. To prevent this, you’d want to disable the opposite action as shown in the following screenshot:

Multiple Conditions

Read more about using multiple conditions in ez Form Calculator in this article.

Date Comparison

Since v2.13.0.5, dates can be compared in the conditional system. The syntax of the compare value is fixed and should match the following format:

The below conditions work like this:

• Set the value of Numbers to 10 if the date of Datepicker is equal or after March 1st, 2020
• Set the value of Numbers to 0 if the date of Datepicker is before March 1st, 2020

The conditions would look like this in the form editor: