QUAZAR-FORMQUAZAR-FORMHow To Use Conditional Logic
Quasar form Pro has powerful integrated conditional logic models. You can use it for the following tasks:
How it works
Logic model works using simple scheme consisting of two elements — condition and action.
1) Condition. Consists of two or three parts depending on condition type.
Example:
The form above has the logic model depicted on the screenshot below:
If the slider value is greater than four, the hidden “Send” button is shown (the button was hidden using field options). Try moving slider and see it for yourself.
2) Action, the second part of any logic model, may consist of three and more values depending on action type. In the above form action displays the button.
A single logic model may have a lot of conditions and actions which reference different fields.
Example:
The form above has two logic models (screenshot):
The first logic model has two conditions and two actions: if the slider value is greater than 9 and the dropdown material menu has “High-quality” field selected, the action part is executed — delivery selection is hidden and the text changes to “You get free delivery”.
What is the use of the second logic model?
It is very simple, not all actions have opposite effects. For example, the action of showing or hiding content has opposite effect if you have hidden the field, but since the condition is not true anymore, the field is shown again.
But some actions like “change html” do not have opposite effect. The text is changed once and for all; even if the condition is false now, the text won’t return to its initial state. This is why we need to create one more logic model in order to return initial text back. In the end, the form above has two logic models.
Actions which do not have opposite effect:
1) Change html
2) Set field value
You can use variables for implementation of complex tasks. A classic case of using variables is making a calculator where the discount depends on value of some field.
The form above has only one logic model (screenshot):
At first we declare variable a and initialize it with value 0. Next, we assign this variable with field value (quantity of pencils), then multiply it by three (originally it is multiplied by 5 in the calculator, but we need two rubles discount so we multiply it by 3). After this we use action to recalculate total, where we simply insert our variable.
Pay attention — the name of variable in action fields is written in curly braces.
Also, know that you can calculate values of different variables using action “Change variable value”. Here:
1) Show field — displays field if it was hidden. Has opposite effect. If the condition is false, the field is hidden automatically again.
2) Hide field — hides field. Has opposite effect. If the condition is false, the field is shown automatically again.
3) Change html in custom text — changes text or html in the “custom text / html” field. Only works with these types of fields. Has no opposite effect. If the condition is false, initial field value is not restored.
The main feature of this field is the ability to use any HTML tags.
4) Set field value — sets field value. Has no opposite effect. If the condition is false, initial field value is not restored.
5) Reset checkbox values – clears all selected values from the checkbox. As long as the condition is met, it will be impossible to set a value for this checkbox.
6) Recalculate total — recalculates the value of the “calculation” field. Works only with this type of field. This kind of logic model may be used to implement discounts. Short code [itog] is current total of the calculator. Other short codes are not supported. If the condition is false, then this field does not influence calculations.
Here is the example of implementing 20% discount: [itog] — (([itog] * 20) / 100 ).
7) Add class — adds a class to the specified element. The main feature of this action is that it is not bounded by the form limits, and you can add a class to any element on a page. If the condition is false, the class does not disappear.
Action consists of two fields. In the first one you specify the selector — it is the class or ID of the element you want to add class to. In the second field you specify the class itself.
8) Delete class — works the same as adding a class, but instead of adding a class, it deletes one.
9-10) Make the field required / make the field not required – make the field required or optional. Required fields cannot be skipped. This feature helps you create complex quizzes.
11-12) Disable sending the field value to mail / enable sending the field value to mail – allows you to exclude the field and its value from the letter that you receive by email. This option is suitable for quizzes with multiple question branches.
13) Change the value of a variable – allows you to set the value of a variable from other variables. The value can be the calculation of several variables. Example:
14) Change variable value to field value – set the value of the variable to the value of the field.
15) Hide tab – hides tab. You cannot switch to a hidden tab. Required fields in a hidden tab are ignored.
16) Show tab – shows tab. Such a tab has the status of a regular tab.
16) Switch to tab – switches the form to the tab specified in this action. To switch to a hidden tab, you first need to show it. Also, if there are blank required fields, switching will not occur. Use the logic of disabling mandatory filling of fields if necessary.
1) Working with a large number of fields
Amount of selectors (fields) in conditions and actions is not limited. There is no need to create a lot of logic models to work with a large number of fields.
On a screenshot above you can see one condition and one action, but there is a lot of work with a large number of selectors (fields). When we use several conditions, we put “and” or “or” between them, meaning that either both or only one condition should be true. You can also see a lot of fields in the action part, which will be shown.
2) Amount of logic models
The amount of logic models used in one form is only limited by your imagination. When there are a lot of logic models, use instruments shown on the screenshot below for convenient view:
3) Accessibility of fields
When you select different actions, you can notice that the list of available fields changes.
There is a simple explanation: when you select an action, fields are filtered automatically, so that only fields suitable for this action remain.