Show, hide or set value of elements with conditional logic

WPEForm comes with a very powerful conditional logic system. Conditional logic works on events and can trigger a series of consequences. Here are a few example of what you can do with the Conditional Logic system.

Show/Hide elements.
Show/Hide pages.
Set value of other form elements.

You can do all the above based on programmatic interpretation of user inputs. Before we dig into how, let us first understand the terminologies and relevant User Interfaces used in the Form Builder.

Accessing Form Logic Builder

Within the Form Builder, click on the Logic icon as shown in the image above. At first, the logics are empty. Click on the ADD NEW BUTTON to get started.

Now you will see the interface has come up to enter EVENTS and fire CONSEQUENCES.

You can add as many logic blocks as you want. In a logic block you can combine any number of events with AND / OR operators and fire any number of consequences.

Adding Events to a Logic Block

For a logic block to work, we need to tell it what events to look for. An event is basically the interpretation of the user input.

Let's say, you have a Single Line Input element in your form, with the title Enter your hobby.

First click on the ADD NEW EVENT button. This will bring up an interface like below.

Adding a Logical Event — Adding an Event

Choose your Enter your hobby element and set has VALUE WHICH IS CONTAINING snowboarding.

Now when someone writes in anything containing the word snowboarding the event will be considered truthy and the system will go on to fire the consequences.

Combining multiple events in a logic block

As mentioned before, you can have any number of events in a logic block. All events are checked with either AND or OR relation with the previous event.

When you have more than one event, the interface lets you choose what the relation would be.

Multiple logical events with relations — Multiple Events with Relations

Let's say you have 5 events, we will call them A, B, C, D, E. The relations you've entered is as follows.

[logic]relation


1A AND -> B OR -> C AND -> D OR -> E

In such cases, the events are grouped by the OR operator. So the checking logic essentially becomes

[logic]interpretation


1(A AND B) OR (C AND D) OR (E)

Here are a few more examples of relations and interpretations.

Relation	Interpretation
`A AND -> B AND -> C AND -> D OR -> E`	`(A AND B AND C AND D) OR (E)`
`A AND -> B AND -> C OR -> D AND -> E`	`(A AND B AND C) OR (D AND E)`
`A AND -> B AND -> C AND -> D AND -> E`	`(A) AND (B) AND (C) AND (D) AND (E)`
`A OR -> B OR -> C OR -> D OR -> E`	`(A) OR (B) OR (C) OR (D) OR (E)`

Firing Consequences

Once you have setup the events, it is time to fire consequences. The system will only fire the consequences, when the event relation is truthy. The following consequences are possible with WPEForm conditional logic.

Show Elements - Select one or more elements to show.
Hide Elements - Select one or more elements to hide from the form.
Show Pages - Select one or more pages to show up.
Hide Pages - Select one or more pages to hide from the form.
Set Value Of - Programmatically set the value of an element.

Adding a Logical Consequence — Adding a Consequence

Showing or Hiding elements or pages

When you select Show/Hide Elements/Pages a dropdown will appear where you will need to select the elements or pages you want to show or hide.

Consequence to show hide pages or form elements — Show/Hide Pages/Elements

You can select any number of elements or pages.

Do note that triggering a Show Elements or Show Pages consequence will not automatically make those elements or pages hidden by default. See later section on this page to actually hide elements or pages initially.

Programmatically Setting Values

Additionally you can also programmatically set value of another element.

Consequence to set value of a form element — Set Value Of

When you choose this option, a specific UI relevant to the element you've selected will show up, where you can set the value. More information can be found under different form elements documentations.

Marking Elements or Pages Hidden initially

As we've seen, we can show or hide elements or pages in a consequence. When showing up an element, we need to make sure that the element or the page was initially hidden.

Initially hiding form elements — Hiding Form Elements

To hide an element initially simply toggle the visibility switch as shown in annotation 1 of the image above. When an element is hidden, it will show up with 50% opacity in the form builder and will not show up at all in the actual form.

In case when user has entered a value in an element, and due to some conditional logic the element becomes hidden, the value entered by the user will be discarded.

Similarly to hide a page initially, go to the page configuration and check the Initially hidden switch.

Initially hiding form pages — Hiding Form Pages

When a page is hidden, all user entered value of all the form elements inside the page are discarded.

A Note on Circular Conditional Logic

Let's say you have a series of conditional logic which has reference(s) to themselves.

For example, let's say you have two Logic Blocks as follows

[logic]


1# Logic Block 1
2IF "element A" HAS VALUE WHICH IS EQUAL TO "option 1"
3  -> SET VALUE OF "element B" TO option 2
4
5# Logic Block 2
6IF "element B" HAS VALUE WHICH IS EQUAL TO "option 1"
7  -> SET VALUE OF "element A" TO option 1

This is recursive in nature and will cause your form to behave incorrectly. WPEForm is able to detect these circular conditional logic and prevent them from execution.

Detecting circular logic in form conditional — Detecting Circular Logic

Open the form preview and open the browser dev tool by pressing F12.

In the CONSOLE tab, you will see hints about the Element causing circular references. It is up to you to fix it.

That was all about understanding the various building blocks of conditional logic system of WPEForm. Check the next part to learn how we have used all these to make an interactive form.