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
            }
          }
       ]

image

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

image

"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
                    }
                }
             ]
⚠️ **GitHub.com Fallback** ⚠️