Ajax Contact form with example php functions

form.js

$('[data-deventform]').each(function () {
  var $this = $(this);
  $('.form-result', $this).css('display', 'none');

  $this.submit(function () {

    $('button[type="submit"]', $this).addClass('clicked');

    $.ajax({
      url: $this.attr('action'),
      type: 'POST',
      data: {
        name: $('input[name="name"]', $this).val(),
        fname: $('input[name="fname"]', $this).val(),
        lname: $('input[name="lname"]', $this).val(),
        email: $('input[name="email"]', $this).val(),
        phone: $('input[name="phone"]', $this).val(),
        location: $('select[name="location"]', $this).val(),
        subject: $('input[name="subject"]', $this).val(),
        website: $('input[name="website"]', $this).val(),
        content: $('textarea[name="content"]', $this).val()
      },
      success: function success(data) {
        if (data.err == true) {
          $('.form-result', $this).addClass('alert-warning').removeClass('alert-success alert-danger').css('display', 'block');
        } else {
          $('.form-result', $this).addClass('alert-success').removeClass('alert-warning alert-danger').css('display', 'block');
        }
        $('.form-result > .content', $this).html(data.msg);
        $('button[type="submit"]', $this).removeClass('clicked');
      },
      error: function error() {
        $('.form-result', $this).addClass('alert-danger').removeClass('alert-warning alert-success').css('display', 'block');
        $('.form-result > .content', $this).html('Sorry, an error occurred.');
        $('button[type="submit"]', $this).removeClass('clicked');
      }
    });
    return false;
  });

});

mailer.php

<?php
/*-----------------------------------------------
  # Variables
  ---------------------------------------------*/
$name       = $_POST['name'];
$email      = $_POST['email'];
$website    = isset($_POST['website']) && !empty($_POST['website']) ? $_POST['website'] : 'No Website';
$subject    = isset($_POST['subject']) && !empty($_POST['subject']) ? $_POST['subject'] : 'New message from your site contact form';
$content    = $_POST['content'];
$toMail     = 'John Doe <john@example.com>'; // Your name & mail address here example 'Aminul Islam <me@aminul.net>'.

/*-----------------------------------------------
  # Error Reporting need first
  ---------------------------------------------*/
$error      = false;
$msg        = '';
$body       = '';

// Check Name
if (empty($name)) {
  $error = true;
  $msg   .= '<strong>Required:</strong> Please enter your name.';
  $msg   .= '<br>';
} else {
  $body  .= '<strong>Name:</strong> ' . $name;
  $body  .= '<br><br>';
}

// Check Email
if (empty($email)) {
  $error = true;
  $msg   .= '<strong>Required:</strong> Please enter your valid email address.';
  $msg   .= '<br>';
} else {
  $body  .= '<strong>Email:</strong> ' . $email;
  $body  .= '<br><br>';
}

// Check Content
if (empty($content)) {
  $error = true;
  $msg   .= '<strong>Required: </strong> Please write something. Can\'t here you from our home';
  $msg   .= '<br>';
} else {
  // Subject
  $body  .= '<strong>Subject:</strong> ' . $subject;
  $body  .= '<br><br>';

  // Website
  $body  .= '<strong>Website:</strong> ' . $website;
  $body  .= '<br><br>';

  // Body Content
  $body  .= '<strong>Message:</strong> ' . $content;
  $body  .= '<br><br>';
}

/*-----------------------------------------------
  # Prepare send mail
  ---------------------------------------------*/
if ($error == true) {
  $msg    .= '<strong>Error:</strong> Please fill form with above info requirement.';
} else {
  $body   .= $_SERVER['HTTP_REFERER'] ? '<br><br><br>This form was submitted from: ' . $_SERVER['HTTP_REFERER'] : '';
  $error   = false;
  $msg    .= '<strong>Success:</strong> Your message has been send.';

  // Mail Headers
  $headers   = array();
  $headers[] = "MIME-Version: 1.0";
  $headers[] = "Content-type: text/html; charset=iso-8859-1";
  $headers[] = "From: {$name} <{$email}>";
  $headers[] = "Reply-To: {$name} <{$email}>";
  $headers[] = "Subject: {$subject}";
  $headers[] = "X-Mailer: PHP/".phpversion();

  mail($toMail, $subject, $body, implode("\r\n", $headers));
}
// Make as json obj
$dataReturn = array(
                'err'   => $error,
                'msg'   => $msg,
                // 'data'  => array(
                //   'name' => $name,
                //   'email' => $email,
                //   'subject' => $subject,
                //   'content' => $content
                // )
              );
header('Content-type: application/json');
echo json_encode($dataReturn);

markup.html

<form class="contact-form for-page" action="mailer.php" method="post" data-deventform="contact">
	<textarea name="content" id="cffp-content" cols="30" rows="10" placeholder="Your Messages ..." required></textarea>
	<input type="text" placeholder="Your Name ..." name="name" id="cffp-name" required>
	<input type="email" placeholder="Your Email ..." name="email" id="cffp-email" required>
	<input type="url" placeholder="Your Website ..." name="website" id="cffp-website">
	<button type="submit" name="submit" id="contact-submit" class="btn btn-devent btn-hs btn-block">
		<span>SUBMIT</span>
		<i class="fa fa-circle-o-notch fa-spin"></i>
	</button>
	<div class="form-result alert">
		<div class="content"></div>
	</div><!-- /.form-result-->
</form><!-- /.contact-form for-page -->