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 function:

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).

If you want to make multiple fields dependent on a single or even multiple checkboxes, you can just call the function multiple times with different parameters (don't forget the ; at the end of each line).  For example:

dependentCheckboxField('My first checkbox','E-Mail');
dependentCheckboxField('My first checkbox','Name');
dependentCheckboxField('My second checkbox','Address');

Bonus: Hide Labels

The code above requires you to set a label for the checkbox and the dependent fields. In case you don't want to display some of the labels, you can hide them by adding the following javascript function between the script tags:

function hidePardotLabel(label) {
    const labelElms = document.querySelectorAll('#pardot-form .form-field label.field-label');
    for (const labelEl of labelElms) {
      if ((labelEl.innerHTML + '').toLowerCase().indexOf(label.toLowerCase()) !== -1) {
        labelEl.style.display = 'none';

Like above, you can hide the fields using:

hidePardotLabel('Subscribe to Newsletter');

If you want to hide multiple labels, you can also just call the function multiple times. For example:

hidePardotLabel('Label from checkbox 1');
hidePardotLabel('Label from checkbox 2');
hidePardotLabel('Label from dropdown');
hidePardotLabel('Label from input');