Decide if an input field should be displayed or not based on the current value of another element

[nikosLapo]

Hello. I would like to ask you a question. I want to create a custom registration form that will ask the user to fill in the email, first name and last name. I also want to have two questions. The possible answers of each of the questions are "yes" and "no". When the user opens the form, I would like only the first question to be visible and after the user selects the "yes" option, then the second question will appear. You can see my implementation below

form: {
          wrapper: '<table></table>',
          inputs: [
            {
              id: 'cx_webchat_form_firstname',
              name: 'firstname',
              maxlength: '100',
              label: '@i18n:webchat.ChatFormFirstName',
            },
            {
              id: 'cx_webchat_form_lastname',
              name: 'lastname',
              maxlength: '100',
              label: '@i18n:webchat.ChatFormLastName',
            },
            {
              id: 'cx_webchat_form_email',
              name: 'email',
              maxlength: '100',
              label: '@i18n:webchat.ChatFormEmail',
            },
            {
              id: 'cx_webchat_form_field_1',
              name: 'customField1',
              type: 'select',
              label: 'Question1',
              options: [
                {
                  text: 'Yes',
                  value: 'Yes',
                  selected: true,
                },
                {
                  text: 'No',
                  value: 'No',
                },
              ],
            },
            {
              id: 'cx_webchat_form_field_2',
              name: 'customField2',
              type: 'select',
              label: 'Question2',
              options: [
                {
                  text: 'Yes',
                  value: 'Yes',
                  selected: true,
                },
                {
                  text: 'No',
                  value: 'No',
                },
              ],
            },
          ],
        }

Can I somehow show/hide the second question based on the answer of the first question?

Thanks in advance

[jacobshaw]

Hi Nikos,
Admittedly, I haven't worked with custom registration forms, but hopefully I can help anyway.
You can set the type attribute of the second question, cx_webchat_form_field_2, to hidden initially.

An event listener could then be added to the first question, cx_webchat_form_field_1, to detect change. If this selected value is yes, you can get the cx_webchat_form_field_2 input element and set its type to select.
This doc about Customizable Chat Registration Form explains that all properties will be added as HTML attributes to the inputs, aside from the special properties, so theoretically you can add an onchange or onclick to the input properties of cx_webchat_form_field_1.