Description:
The form builder should support adding conditional rules to dynamically display fields based on previous answers that the user has selected. This feature will enable the creation of more interactive and context-specific forms, enhancing user experience and data collection accuracy.
Feature Requirements:
Conditional Rule Setup:
Users should be able to define conditional rules for any form field.
A rule should specify:
Trigger Field: The field whose response will determine whether the target field is shown or hidden.
Trigger Value: The specific response value(s) of the trigger field that will activate the rule (e.g., "Yes" for a "Do you smoke?" question).
Target Field: The field that will be displayed or hidden based on the trigger field's response.
UI Integration:
In the form builder UI, there should be an option to add a conditional rule to any field (target field).
When setting up a rule, the user should be able to choose an existing form field as the trigger field.
The user should then specify the trigger value that will control the visibility of the target field.
Example Scenario:
Trigger Field: "Do you smoke?" (Yes/No radio button field).
Trigger Value: "Yes".
Target Field: "How many packs do you smoke per day?" (Number input field).
Rule: If the user selects "Yes" for the "Do you smoke?" question, the "How many packs do you smoke per day?" field should be displayed. Otherwise, the field should remain hidden.
Conditional Display Behavior:
During form filling, if a user changes their response to a trigger field, the visibility of the corresponding target field(s) should be updated in real-time.
If a field is hidden due to a conditional rule, any data entered in that field should be cleared when the field is hidden again.
Validation and Submission:
Only visible fields should be considered for validation and submission.
If a field is hidden based on a conditional rule, its value should not be submitted as part of the form data.
example can viewed here.
https://formio.github.io/formio.js/app/builder.html
example UI

Please authenticate to join the conversation.
In Review
π‘ Feature Request
Over 1 year ago

Mahmoud
Get notified by email when there are changes.
In Review
π‘ Feature Request
Over 1 year ago

Mahmoud
Get notified by email when there are changes.