Conditionally revealing content - smbc-digital/form-builder GitHub Wiki
Conditionally revealing content is currently supported on
- Radio
- Checkbox
This allows you to conditionally reveal content when a user has ticked a specific option.
To use Conditionally revealing content within an element, When building the elements json you simply specify the element is conditional by setting IsConditionalElement to true and referencing its questionID within the options ConditionalElementId for the element.
Elements": [
{
"Type": "Radio",
"Properties": {
"QuestionId": "radButton",
"Label": "Do you like things?",
"Options": [
{
"Text": "Yes",
"Value": "yes",
"ConditionalElementId": "firstQuestion"
}
]
}
},
{
"Type": "TextBox",
"Properties": {
"QuestionId": "firstQuestion",
"Label": "Tell us why",
"IsConditionalElement": true
}
}
]
Radio example which will display different elements based on the radio option selected
"Elements": [
{
"Type": "Radio",
"Properties": {
"QuestionId": "radButton",
"Label": "Do you like things?",
"LegendAsH1": false,
"Hint": "Things like this and that",
"Optional": false,
"Options": [
{
"Text": "Yes",
"Value": "yes",
"Hint": "<strong>This</strong> is an affirmative response.",
"ConditionalElementId": "firstQuestion"
},
{
"Text": "No",
"Value": "no",
"Hint": "This is a negative response.",
"ConditionalElementId": "secondQuestion"
},
{
"Text": "Maybe",
"Value": "maybe",
"ConditionalElementId": "thirdquestion"
}
]
}
},
{
"Type": "TextBox",
"Properties": {
"QuestionId": "firstQuestion",
"Label": "Tell us why",
"Hint": "This is a hint",
"Size": 1,
"IsConditionalElement": true
}
},
{
"Type": "DateInput",
"Properties": {
"QuestionId": "secondQuestion",
"Label": "Tell us when you came to this decision",
"Optional": false,
"Hint": "Input a date",
"CustomValidationMessage": "This field is required",
"ValidationMessageInvalidDate": "Invalid date",
"IsConditionalElement": true
}
},
{
"Type": "p",
"Properties": {
"Text": "You can add as much text as you want here.",
"questionid": "thirdquestion",
"IsConditionalElement": true
}
},
{
"Type": "Button",
"Properties": {
"ButtonId": "continue"
}
}
]Checkbox example this will reveal a textbox whe the user selected email/phone/text
"Elements": [
{
"Type": "Checkbox",
"Properties": {
"QuestionId": "contactBy",
"Label": "How would you like to be contacted?",
"LegendAsH1": true,
"Hint": " Select all options that are relevant to you.",
"Optional": false,
"Options": [
{
"Text": "Email",
"Value": "email",
"ConditionalElementId": "email"
},
{
"Text": "Phone",
"Value": "phone",
"ConditionalElementId": "phone"
},
{
"Text": "Text message",
"Value": "Text",
"ConditionalElementId": "text"
}
]
}
},
{
"Type": "TextBox",
"Properties": {
"QuestionId": "email",
"Label": "Email address",
"IsConditionalElement": true
}
},
{
"Type": "TextBox",
"Properties": {
"QuestionId": "phone",
"Label": "Phone number",
"IsConditionalElement": true
}
},
{
"Type": "TextBox",
"Properties": {
"QuestionId": "text",
"Label": " Mobile phone number",
"IsConditionalElement": true
}
}
]