Form tester for Contact Form 7 - Conditional Fields for CF7

Form code

<style>
  .upload-box {
      background-color: white;
      outline: 2px dashed black;
      height: 200px;
      margin: 10px 2px;
  }
  .upload-box.is-dragover {
      background-color: grey;
  }
  .upload-box {
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .upload-box label {
      width: auto !important;
  }
  .upload-box label strong {
      text-decoration: underline;
      color: blue;
      cursor: pointer;
  }
  .upload-box label strong:hover {
      color: blueviolet
  }
  .upload-box input {
      display: none !important;
  }
</style>
<label>What's your name?
[text* your-name]</label>
<div class="upload-box">
  <label><strong>Select files</strong><span> or drag them here...</span>[multifile* my-files]</label>
  <div class="file-list"></div>
</div>
[submit]
<script>
    const box = document.querySelector('.upload-box');
    const fileInput = document.querySelector('[name="my-files[]"');
    const selectButton = document.querySelector('label strong');
    const fileList = document.querySelector('.file-list');
    let droppedFiles = [];
    [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
        e.preventDefault();
        e.stopPropagation();
    }), false );
    [ 'dragover', 'dragenter' ].forEach( event => box.addEventListener(event, function(e) {
        box.classList.add('is-dragover');
    }), false );
    [ 'dragleave', 'dragend', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
        box.classList.remove('is-dragover');
    }), false );
    box.addEventListener('drop', function(e) {
        droppedFiles = e.dataTransfer.files;
        fileInput.files = droppedFiles;
        updateFileList();
    }, false );
    fileInput.addEventListener( 'change', updateFileList );
    function updateFileList() {
        const filesArray = Array.from(fileInput.files);
        if (filesArray.length > 1) {
            fileList.innerHTML = filesArray.length + ' files selected';
        } else if (filesArray.length == 1) {
            fileList.innerHTML = '1 file selected';
        } else {
            fileList.innerHTML = '';
        }
    }
</script>

Conditions (Text View)

Email / Summary code

Attachments

Additional settings

Resulting form

Enabled plugins:

Contact Form 7
Conditional Fields PRO

How to use