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
OR operators and fire any number
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.
Choose your Enter your hobby element and set has VALUE WHICH IS CONTAINING .
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
OR relation with the previous event.
When you have more than one event, the interface lets you choose what the relation would be.
Let's say you have 5 events, we will call them A, B, C, D, E. The relations you've entered is as follows.
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
1(A AND B) OR (C AND D) OR (E)
Here are a few more examples of relations and interpretations.
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.
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.
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.
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.
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.
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
1# Logic Block 12IF "element A" HAS VALUE WHICH IS EQUAL TO "option 1"3 -> SET VALUE OF "element B" TO option 245# Logic Block 26IF "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.
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.