{"id":13372,"date":"2022-07-25T16:53:12","date_gmt":"2014-11-18T08:55:09","guid":{"rendered":"http:\/\/www.123formbuilder.com\/docs\/?p=13372"},"modified":"2025-02-06T08:41:25","modified_gmt":"2025-02-06T08:41:25","slug":"how-to-use-conditional-logic-to-showhide-form-fields","status":"publish","type":"post","link":"https:\/\/www.123formbuilder.com\/docs\/how-to-use-conditional-logic-to-showhide-form-fields\/","title":{"rendered":"How to use conditional logic to show\/hide form fields on 123FormBuilder?"},"content":{"rendered":"\n

To use conditional logic to show or hide form fields, go to the Rules<\/b> section of your form within the form builder<\/a>. Tick the option Enable field rules<\/em>, under the Field Rules<\/b> tab.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Field<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Afterward, click on the Add Rule<\/b> button to start setting up your rules.<\/p>\n\n\n\n

The first condition (IF<\/b>)<\/em> will appear on the page along with some dropdowns, a Cancel,<\/b> and a Continue<\/b> button.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Show\/hide<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

In the first dropdown, select the field to which you want the rule to apply. Here you will find a list of all the form fields that collect data.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Form<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Then, select the condition. Depending on the field type selected previously, you will see different conditions. For the Email<\/b> field, for example, you have the conditions: is<\/em>, is not<\/em>, contains<\/em>, does not contain<\/em>, etc. Another example could be related to age restriction: If age is less than 21, then don’t show the list of alcoholic beverages on the form.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Conditions\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

For choice fields, you can use the conditions is checked<\/em> or is not checked<\/em>. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Choice<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

If you want to create multiple rules, click on the grey plus sign to create a new condition. It is connected to the previous condition with one of the available connectors: OR<\/b> and AND<\/b>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Additional<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Use this button if you want to set multiple conditions within the same rule. You can always remove the second condition by clicking on the Remove<\/b> button.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Multiple<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Next, hit Continue<\/b> and select one of the two existing actions: Show<\/b> or Hide<\/b>. In the end, select the field or fields you want to show or hide after the condition has been met on the form.<\/p>\n\n\n\n

Note:<\/strong> If you wish to Show or Hide the Multiply field group<\/b> field, please select the Multiply field group element and all the fields included in it. Otherwise, your rule will not work as expected.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

When hovering over the conditions, you will notice some additional options: Delete<\/b>, Edit<\/b>, Subrule<\/b>. You can edit or delete a condition by clicking on the appropriate buttons.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Edit<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

If you want to add a subrule (an additional layer of rule), click on the Subrule<\/b> button. In the below case, for the second condition, we have added an additional rule with a conditional operator: AND\/OR.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Subrule\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Once the subrule has been added, it will look like below:<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Subrule<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Important Note<\/b><\/p>You cannot Show\/Hide the same fields in multiple rules. This will create a conflict and your rules will no longer work properly. You can duplicate your existing fields to show or hide them in multiple rules.<\/span><\/div>\n\n\n\n

<\/p>\n\n\n\n

Hit Finished<\/b> to add and apply the rule to your online form.<\/p>\n\n\n\n

You can always disable the rules by clicking on the Enable field rules <\/b>checkbox. The rules will remain the same and will be currently unavailable. At any time you can come back and turn them back on.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Disable<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

Related articles<\/b><\/p>\n\n\n\n