Show A Field Only When All Checkboxes Are Selected In Contact Form 7

You might want to read this post on how to conditionally display fields in Contact Form 7 plugin with simple JavaScript first to get some context.

Here we are trying to display a line of text when all checkboxes are checked.

Here is the result.

Here is the markup that goes into the contact form editor of Contact Form 7.

<div id="pancakes">What do you think is the greatest risk of getting sick?
[checkbox checkbox-411 use_label_element "Purchase of animals" "Livestock farmers in the area" "Animals in nature areas"]</div>
 
<p id="answer-for-pancakes">All answers are good. The purchase of animals is the greatest risk, but also in other ways, viruses can enter the livestock.</p>

Here is the JavaScript

<script language="javascript" type="text/javascript">
// Select the container div by its ID
var container = document.getElementById('pancakes');
// Get the input elements in the container
var checkbox = container.getElementsByTagName('input');
// Hide answer by default
document.getElementById("answer-for-pancakes").style.display = 'none';
// Assign a function to onclick property of each checkbox
for (var i=0, len=checkbox.length; i<len; i++) {
  if ( checkbox[i].type === 'checkbox' ) {
    checkbox[i].onclick = function() {
      var check = 0;
      for(var j=0; j < checkbox.length; j++) {
        if (checkbox[j].checked === false) {
           check = 1;
        }
      }
      if(check === 0) {
        document.getElementById("answer-for-pancakes").style.display = 'block';
      }
      else{
        document.getElementById("answer-for-pancakes").style.display = 'none';
      }
    }
  }
}
</script>

Make sure the highlighted text in both the markup and the JavaScript matches.

Here is how the complete markup for the contact form editor in Contact Form 7 will look like in the end.

<label> Your Name (required)
[text* your-name] </label>
   
<label> Your Email (required)
[email* your-email] </label>
  
<div id="pancakes">What do you think is the greatest risk of getting sick?
[checkbox checkbox-411 use_label_element "Purchase of animals" "Livestock farmers in the area" "Animals in nature areas"]</div>
  
<p id="answer-for-pancakes">All answers are good. The purchase of animals is the greatest risk, but also in other ways, viruses can enter the livestock.</p>
  
[submit "Send"]
  
<script language="javascript" type="text/javascript">
// Select the container div by its ID
var container = document.getElementById('pancakes');
// Get the input elements in the container
var checkbox = container.getElementsByTagName('input');
// Hide answer by default
document.getElementById("answer-for-pancakes").style.display = 'none';
// Assign a function to onclick property of each checkbox
for (var i=0, len=checkbox.length; i<len; i++) {
  if ( checkbox[i].type === 'checkbox' ) {
    checkbox[i].onclick = function() {
    var check = 0;
    for(var j=0; j < checkbox.length; j++) {
    if (checkbox[j].checked === false) {
       check = 1;
    }
    }
    if(check === 0) {
    document.getElementById("answer-for-pancakes").style.display = 'block';
    }
    else{
    document.getElementById("answer-for-pancakes").style.display = 'none';
    }
    }
  }
}
</script>

Hello, I am Arun Basil Lal. Thank you for reading!

I am a freelance WordPress developer with over a decade of experience. I am passionate about making things and traveling the world.