Display a form field conditionally

Boris Hocdé Updated by Boris Hocdé

You can make a form field appear only if another field matches a condition. For example, you can your visitors how they heard about you. In a dropdown, the visitor can choose the 5 most frequent channels. And a 6th option "Other" makes a free text field appears.

First, create 2 form fields

The first one should be a dropdown to select the default choices:

And the second one is for the free text in case "Other" is selected.

The IDs of the two fields and the value of the "Other" option are used to connect things together.

In our example, we use the field IDs hear_about_us and hear_about_us_other, and the special value other.

The free text field mustn't be set as required.

In CSS, hide the free text field unless it has a class to make to visible

In our custom CSS tool, add the following snippet to make the free text field appear only if it has a class visible:

[name=hear_about_us_other]:not(.visible) {
  display: none;
}

Pay attention to replace hear_about_us_other by the field ID you chose in your form.

In JavaScript, add the visible class when relevant

Now, let's add and remove the class visible to the free text field when it should appear or disappear.

Create a JS callback listening for the event Before popup display, with the following snippet:

var customIfValue = 'other';
var choiceField = event.target.querySelector('select[name=hear_about_us]');
var customField = event.target.querySelector('input[name=hear_about_us_other]');

if (choiceField && customField) {
  choiceField.addEventListener('change', function() {
    if (this.value === customIfValue) {
      customField.classList.add('visible');
    } else {
      customField.classList.remove('visible');
    }
  });
}

Ensure to replace other, hear_about_us, and hear_about_us_other by the values you're using in your form.

And voilà! Your free text field will appear if "Other" is chosen. And disappear if another option is selected.

Testing this campaign in preview mode won't work, as JS scripts are not triggered. If you want to test it, try publishing your campaign under hidden URL.

To go further

If you want to use a checkbox or multiple choice field for condition

The script differs slightly (choiceField and second "if" condition):

var customIfValue = 'other';
var choiceField = event.target.querySelector(`input[type=checkbox][value=${customIfValue}]`);
var customField = event.target.querySelector('input[name=hear_about_us_other]');

if (choiceField && customField) {
  choiceField.addEventListener('change', function() {
    if (this.checked) {
      customField.classList.add('visible');
    } else {
      customField.classList.remove('visible');
    }
  });
}

If you want to use a radio field for condition

The script differs slightly (choiceField and second "if" condition):

var customIfValue = 'other';
var choiceFields = event.target.querySelectorAll(`input[type=radio]`);
var customField = event.target.querySelector('input[name=hear_about_us_other]');

if (choiceFields && customField) {
    choiceFields.forEach((option) => {
        option.addEventListener('change', function() {
            if (this.checked && this.value === customIfValue) {
                customField.classList.add('visible');
            } else {
                customField.classList.remove('visible');
            }
        })
    });
}

If you want to have 2 conditional fields for the same dropdown

This script adds other value to check if it should be revealed. It removes visible tags for all fields and adds visible for the condition that's met.

If you wanted to create other condition, add hidden field analogically as the first (add field, hide it with CSS) and add slightly modified script. The code below assumes the 2nd input has name `another_field_to_reveal` and value of select option is `another`. These are just example names and can be named freely:

var choiceField = event.target.querySelector('select[name=hear_about_us]');

var customIfValue = 'other';
var customField = event.target.querySelector('input[name=hear_about_us_other]');

var customIfValue2 = 'another';
var customField2 = event.target.querySelector('input[name=another_field_to_reveal]');

if (choiceField && (customField || customField2)) {
  choiceField.addEventListener('change', function() {
    customField.classList.remove('visible');
    customField2.classList.remove('visible');
    
    if (this.value === customIfValue) {
      customField.classList.add('visible');
    } else if(this.value === customIfValue2) {
      customField2.classList.add('visible');
    } 
  });
}

If you want to use dropdown as a field to reveal

There are slight CSS and JS differences.

CSS:

.wisepops-field[name=hear_about_us_other]:not(.visible) {
  display: none;
}

JS - customField line is different:

var customField = event.target.querySelector('.wisepops-field[name=hear_about_us_other]');

If you want to remove space created by hidden field:

Hidden fields still add some margins (set in "Size" menu -> "Spacing" available in top toolbar after selecting the form block). If you want to get rid of extra space when field is hidden:

1. Reduce the Spacing to 0

2. Add CSS to apply spacing to `.wisepops-field` container (1 level below editor's spacing is added):

div.wisepops-field, button {
	margin-top: 12px;
}

Embed a SurveyMonkey Quiz Into a Popup

How to create an NPS survey popup

Contact