Using the Script Editor - Showing and Hiding Form Fields

Most form fields have a property called Handlers. A handler contains a script that is triggered when the value of the field changes. The script you write provides the instructions for what you'd like to happen.

Add a handler to the first checkbox

The handler of each checkbox field needs to do two things. First it needs to show one of the hidden fields when the checkbox is checked. Second it needs to hide the field and clear the value when unchecked.

Click on the email checkbox, then the Handler property:

Open the script editor, it already contains the starting point for your script:

In the "Logic" category, there's a block for building "if/else" statements:

Drag the block into the work area and add it to the function. The block will snap into place when you drop it:

Click on the gear icon. This will let you build up the if/else statement. Drag the "else" block from the left and attach it to the "if" block on the right:

The logic we want to write states "if the value of this field equals 'Yes', show a field, otherwise, hide a field and clear its value". To build the first part of that logic, add an "equals" block from the "Logic" category:

Next, in the "Variables" category, add a "variable" block to the first part of the "equals" block. Variables are named containers that your form knows about - they hold values which may change (they vary) while your form is being filled out.

Click on the text to pick a variable. The "value" variable holds the current value of this checkbox field:

The value of the checkbox field will be either "Yes" (see the previous step in this tutorial) or it will be empty. Add a "text" block and update the text to "Yes":

Add "show field..." and "hide field..." blocks. Update the name of the field that will be shown or hidden by clicking on the text:

The final step is to clear the value of the field if the user hides it by unchecking the box. This step is important because if a user changes their mind, you don't want to collect any text entered into a field which is later hidden.

From the "Form Fields" category, add the "update field..." block. Pick the name of the field that will be updated, then add an empty text block to clear the value:

Repeat for the remaining fields

Add the same logic to the other checkboxes, making sure the relevant fields are shown and hidden for each one.

Save and publish

Save and publish your form on your site. When you check each checkbox a new field should be revealed. Clearing a checkbox should hide the text field and clear anything that had been typed into it.

Something's gone wrong

If something isn't working you can download and import the finished example:  (ZIP) [5KB]

The finished form is published here: Showing and Hiding Fields Example