Conditional Visibility for Form Fields via Conditional Block
Conditional Visibility is a functionality that allows you to make parts of the form invisible for the users until some conditions are met. Conditions and fields that will be hidden are set with the help of Conditional Block.
How does it work?
The Conditional Block can be added and customized during the form creation process in the JetForms menu tab. You won’t be able to use it when the form is on the page. When you add it to the form, it looks like that:
On the block’s surface, you can see a big button with a plus-shaped icon on it. By clicking on it, you can add any field to the conditional block. Let’s name it a connected field. The connected field will be shown (or hidden, it depends on the settings) when the defined conditions are met. You can add several connected fields but be aware that they will be shown and hidden in one pack.
Afterward, you choose another field of the form – let’s name it a target field – and the operator in the settings window. The operator defines the condition that the target field value should meet. For example, you can choose that the value of the target field has to be equal to some value.
The conditional block compares the value of the target field with the value set in the settings window. If it meets the operator’s requirement, the connected field will be shown (or hidden).
To open the Conditional Block settings window, press the button with the crossed arrows icon, which is placed on the top tool panel to the left of the “Options” button.
The Conditional Logic pop-up window contains all the conditional visibility settings.
- Safe deleting. This toggle is turned on by default. It prevents you from accidentally deleting a condition. When it is on, you will receive a confirmation message. The condition will be deleted after you confirm that you really mean to delete it;
- The button with the eye icon. When you click on it, it hides/shows the condition;
- Buttons with arrows. If you have several conditions, those buttons move the condition up or down in the list. It doesn’t affect its efficiency. The position in the conditions list may be important for the navigation;
- “Clone” button. It creates a copy of the condition;
- “Delete” button. This button deletes the condition;
- “New Condition” button. You can add as many conditions as you need for your form by clicking on this button.
Here you can set the visibility of the connected field by default. If you choose the “Hide this field if” option, the connected field will be visible until the conditions are met. The “Show this field if” option will make the field invisible by default, and it will appear only if the conditions are met.
Here you can choose the target field. The value of this field will be compared with the value from the Value to Compare bar. You choose one of the fields that are already added to the form, so all of them will be listed in this drop-down menu, named by their labels.
The option you choose here will define how the value of the target field will be compared to the data you put into the Value to Compare text area.
The condition will be met if the value in the target field is equal to the value from the Value to Compare bar.
The connected field (“Number of rooms”) appears only if the value of the target field (“Number of visitors”) is equal to “3”.
The connected field will be shown/hidden if the value of the target field is greater than the one you put to the Value to Compare field.
If the value of the target field is lesser than the number you put to the Value to Compare text area, the connected field will be shown or hidden.
This operator allows you to insert a range into the Value to Compare text area. The first and last numbers have to be typed in ascending order (from lesser to greater) and separated by a comma. The first and last numbers also count in the range. If the value of the target field is equal to one of the numbers in the range, the connected field will be shown/hidden.
Let’s assume you’ve put the range “2,5” to the Value to Compare text area. The connected field will be shown or hidden if the value of the target field is equal to “2”, “3”, “4”, or “5”.
In the list
This operator works with Radio, Checkbox, and Select form fields.Every option of the multi-choice fields has a value. The conditional block takes the value of the option that was chosen by the user and compares it with the one you put to the Value to Compare bar. If they are equal – the connected field will be shown. The value can be either numeric or alphabetical.
The connected field (“Parking place”) will be shown only if the value of the target field (“What transport will you use”) is equal to “3”, which is the value of the “car” option.
This operator works with Text, Textarea, and Media form fields
It makes the conditional block seek the value you place to the Value to Compare bar in the text that the user inserts into the target field. If it finds a match, the connected field will be shown or hidden. The value can be either numerical or alphabetical.
The target field (“Would you like to take a look at our grill menu?”) will be shown only if the word “meat” appears in the target field (“Any food preferences”).
In the case of the Media field, you can insert the format of the file (like “.png”) to the Value to Compare bar, and the connected field will be shown or hidden when the user uploads the file of that format.