When creating complex Pardot Forms, fields can be made dependent on other fields. This allows to show or hide certain inputs if the user selects pre-defined values. However, this does not work for checkboxes.

The following script can be used to hide and show fields when the user checks a checkbox.

Pardot insert HTML Code below Form
Pardot insert HTML Code below Form

In Pardot, open your desired form and go to Step 3: Look and Feel -> Below Form -> HTML Mode (see screenshot) and insert an empty script tag:

<script type="text/javascript">


Between the script tags add the following javascript code:

function dependentCheckboxField(checkboxName, dependentFieldName) {
  function findPardotFormFieldByLabel(label) {
    const fieldElms = document.querySelectorAll('#pardot-form .form-field');
    for (const fieldEl of fieldElms) {
      const labelEl = fieldEl.querySelector('label.field-label');
      if ((labelEl.innerHTML + '').toLowerCase().indexOf(label.toLowerCase()) !== -1)
        return fieldEl;
  const checkboxEl = findPardotFormFieldByLabel(checkboxName);
  const dependentFieldEl = findPardotFormFieldByLabel(dependentFieldName);
  function showDependentField(show) {
    if (show)
      dependentFieldEl.style.display = 'none'; 
  checkboxEl.addEventListener('change', event => showDependentField(event.target.checked));

After the javascript code (but before the closing script tag </script>), you can now add dependent checkbox fields with:

dependentCheckboxField('Subscribe to Newsletter','E-Mail');

The first parameter is the name/label of the checkbox (e.g. Subscribe to Newsletter) and the second parameter is the name/label of the dependent field that should be visible when the checkbox is checked (e.g. E-Mail).

And if multiple fields have to be made dependent, just add the mentioned line of code multiple times (don't forget the ; at the end of each line).