Adding working checkboxes to a contact form

Question

I am trying to add checkboxes to my contact form. I have a working contact form that with 3 checkboxes. When I place the php code that I found on this page (send checkbox value in PHP form) then my checkboxes are no longer clickable BUT when the email sends all three checkboxes appear in the email. I think that there must be a simple fix somewhere but I have spent the whole live long day working on it and this is as far as I have been able to get.

How do I get the checkboxes clickable AND have the selected box be included in the email?

Here is my html

    <section class="contact">   
    <form id="contact" action="html_form_send.php" method="post">
    <fieldset title="About you">
    <legend><span>About you</span></legend>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" tabindex="10"   class="txtinput" placeholder="Your name" required>
  <label for="email">Email</label>
  <input type="email" name="email" id="email" tabindex="20" class="txtinput" placeholder="valid email" required>
  </fieldset>
  <fieldset title="Your turn">
  <legend><span>Your turn</span></legend>
  <p>What, exactly then, are you after?</p>
  <div>
   <div class="tag">checkbox1</div>
   <input type="checkbox" id="checkbox-1" class="regular-checkbox big-checkbox" value="Yes" />
   <label for="salvation"></label>
  </div>    
  <div>
    <div class="tag">checkbox2</div>
    <input type="checkbox" id="checkbox-2" class="regular-checkbox big-checkbox" value="Yes" />
    <label for="question"></label>
  </div>    
  <div>
    <div class="tag">checkbox3</div>
    <input type="checkbox" id="checkbox-3" class="regular-checkbox big-checkbox" value="Yes" />
    <label for="other"></label>
   </div>   
   <label for="comment" class="inline"></label>
      <label for="discourse">Write your comments here</label>
     <textarea id="discourse" name="discourse" tabindex="30" class="txtinput" rows="7" placeholder="This is where your thoughts go">
     </textarea>

   <section id="buttons">
   <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
   <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="40" value="Send away!">
   <br style="clear:both;">
   </section>

And here is my php

          <?php
if(isset($_POST['email'])) {

          // CHANGE THE TWO LINES BELOW
          $email_to = "myemail@email.org";

          $email_subject = "website feedback";


          function died($error) {
          // your error code can go here
        echo "We're sorry, but there's errors found with the form you submitted.<br /><br />";
         echo $error."<br /><br />";
         echo "Please go back and fix these errors.<br /><br />";
         die();
         }

          // validation expected data exists
         if(!isset($_POST['name']) ||
         !isset($_POST['email']) ||
         !isset($_POST['discourse'])) {
         died('We are sorry, but there appears to be a problem with the form you submitted.');      
    }

         $name = $_POST['name']; // required
         $email_from = $_POST['email']; // required
         $discourse = $_POST['discourse']; // not required  $comments =    $_POST['comments']; // required     

         $error_message = "";
         $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
         $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
          }
          $string_exp = "/^[A-Za-z .'-]+$/";
          if(!preg_match($string_exp,$name)) {
          $error_message .= 'The Name you entered does not appear to be valid.<br />';
           }
          if(strlen($discourse) < 2) {
          $error_message .= 'The Comments you entered do not appear to be valid.<br />';
          }
          if(strlen($error_message) > 0) {
    died($error_message);
           }
          $email_message = "Form details below.\n\n";

          function clean_string($string) {
          $bad = array("content-type","bcc:","to:","cc:","href");
          return str_replace($bad,"",$string);
          }

          $email_message .= "Name: ".clean_string($name)."\n";
          $email_message .= "Email: ".clean_string($email_from)."\n";
          $email_message .= "checkbox1: ".clean_string($checkbox-1)."\n";
          $email_message .= "checkbox2: ".clean_string($checkbox-2)."\n";
          $email_message .= "checkbox3: ".clean_string($checkbox-3)."\n";
          $email_message .= "Comments: ".clean_string($discourse)."\n";

          $checkbox1= $_POST['checkbox1'];
          if ($checkbox1!= 'Yes') {
          $checkbox1= 'No'; }

          $checkbox2= $_POST['checkbox2'];
         if ($checkbox2!= 'Yes') {
         $checkbox2= 'No'; }

         $checkbox3= $_POST['checkbox3'];
         if ($checkbox3!= 'Yes') {
         $checkbox3= 'No'; }

         // create email headers
         $headers = 'From: '.$email_from."\r\n".
         'Reply-To: '.$email_from."\r\n" .
         'X-Mailer: PHP/' . phpversion();
         @mail($email_to, $email_subject, $email_message, $headers);  
         ?>

          <?php
         $checkbox = $_POST['value']
          //Will return either "checkbox1" or "checkbox2" or "checkbox3".
          ?>

         <!-- place your own success html below -->

        <script language="javascript" type="text/javascript">
        alert('Thank you for contacting us.');
        window.location = 'feedbackform.html';
        </script>    
         <?php
          }

         die();
           ?>

Answer 1

If the checkboxes aren't clickable then it is most likely that some other element(s) are sitting above them. Using your browser's developer tools is the quickest way to discover this. The PHP does not affect whether they are clickable or not.

If I were to guess it would be that their labels are sitting above them. (Note that empty elements like these should be avoided.)

The checkboxes (and other form elements) must have a name attribute in order to be submitted with the form.