title: HTML/JS Contact Form Not Sending or Showing Error Message
body: <p>I have a contact form that I can't seem to send to my Gmail account. It's different from all the contact forms I've seen because the error message is within the HTML. Nothing happens when the submit button is pressed (no email, no error or success message). Please be gentle for I am somewhat new to PHP. I just need some help please.</p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;div class="contactForm"&gt;
          &lt;div class="successMessage alert alert-success alert-dismissable" style="display: none"&gt;
              &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              Thank You! E-mail was sent.
            &lt;/div&gt;
            &lt;div class="errorMessage alert alert-danger alert-dismissable" style="display: none"&gt;
              &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              Oops! An error occured. Please try again later.
            &lt;/div&gt;
  
            &lt;form class="liveForm" role="form" action="form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" data-hide-form="false"&gt;
              &lt;fieldset&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Name &lt;span&gt;(Required)&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="text" required name="field[]" class="form-control"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Email &lt;span&gt;(Required)&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="email" required name="field[]" class="form-control"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Subject&lt;/label&gt;
                      &lt;input type="text" name="field[]" class="form-control"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Message &lt;span&gt;(Required)&lt;/span&gt;&lt;/label&gt;
                      &lt;textarea name="field[]" required class="form-control" rows="5"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="submit" class="btn btn-primary" value="Send Message"&gt;
              &lt;/fieldset&gt;
            &lt;/form&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>The JS</strong></p>
  
  <pre><code>/**
   * Contact Form
   */
  jQuery(document).ready(function ($) {
      "use strict";
      $ = jQuery.noConflict();
  
      var debug = false; //show system errors
  
      $('.liveForm').submit(function () {
          var $f = $(this);
          var showErrors = $f.attr('data-show-errors') == 'true';
          var hideForm = $f.attr('data-hide-form') == 'true';
  
          var emailSubject = $f.attr('data-email-subject');
  
          var $submit = $f.find('[type="submit"]');
  
          //prevent double click
          if ($submit.hasClass('disabled')) {
              return false;
          }
  
          $('[name="field[]"]', $f).each(function (key, e) {
              var $e = $(e);
                var p = $e.parent().find("label").text();
  
              if (p) {
                  var t = $e.attr('required') ? '[required]' : '[optional]';
                  var type = $e.attr('type') ? $e.attr('type') : 'unknown';
                  t = t + '[' + type + ']';
  
                  var n = $e.attr('name').replace('[]', '[' + p + ']');
  
                  n = n + t;
                  $e.attr('data-previous-name', $e.attr('name'));
                  $e.attr('name', n);
              }
          });
  
          $submit.addClass('disabled');
  
          $f.append('&lt;input class="temp" type="hidden" name="email_subject" value="' + emailSubject + '"&gt;');
  
          $.ajax({
              url: $f.attr('action'),
              method: 'post',
              data: $f.serialize(),
              dataType: 'json',
              success: function (data) {
                  $('span.error', $f).remove();
                  $('.error', $f).removeClass('error');
                  $('.form-group', $f).removeClass('has-error');
  
                  if (data.errors) {
                      $.each(data.errors, function (i, k) {
                          var input = $('[name^="' + i + '"]', $f).addClass('error');
                          if (showErrors) {
                              input.after('&lt;span class="error help-block"&gt;' + k + '&lt;/span&gt;');
                          }
  
                          if (input.parent('.form-group')) {
                              input.parent('.form-group').addClass('has-error');
                          }
                      });
                  } else {
                      var item = data.success ? '.successMessage' : '.errorMessage';
                      if (hideForm) {
                          $f.fadeOut(function () {
                              $f.parent().find(item).show();
                          });
                      } else {
                          $f.parent().find(item).fadeIn();
                          $f[0].reset();
                      }
                  }
  
                  $submit.removeClass('disabled');
                  cleanupForm($f);
              },
              error: function (data) {
                  if (debug) {
                      alert(data.responseText);
                  }
                  $submit.removeClass('disabled');
                  cleanupForm($f);
              }
          });
  
          return false;
      });
  
      function cleanupForm($f) {
          $f.find('.temp').remove();
  
          $f.find('[data-previous-name]').each(function () {
              var $e = jQuery(this);
              $e.attr('name', $e.attr('data-previous-name'));
              $e.removeAttr('data-previous-name');
          });
      }
  });
  </code></pre>
  
  <p><strong>The PHP</strong></p>
  
  <pre><code>&lt;?php
  // Contact subject
  $name = $_POST['name'];
  $email = $_POST['email'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  // Enter your email address
  $to ='divagraphicsinc@gmail.com';
  $send_contact=mail($to,$subject,$message,$header);
  ?&gt;
  </code></pre>