Receiving PHP contact form error (Please complete the form and try again. )

Question

I am creating a contact form with 5 fields which will email the input details to a set e-mail but when the form is submitted i,m receiving error! Please complete the form and try again. here is php code, js and htm form. Any help would be much appreciated.

html Form:

<form id="contact-form" action="mail.php" method="post">
        <div class="single-input">
        <input type="text" name="name" id="comment-name" placeholder="Enter your name">
        </div>
        <div class="single-input">
        <input type="email" placeholder="Your email">
        </div>
        <div class="single-input">
        <input type="text" name="phone" placeholder="Phone">
        </div>
        <div class="single-input">
        <input type="text" name="subject" placeholder="Subject">
        </div>
        <div class="single-input textarea">
        <textarea cols="3" name="message" rows="3" placeholder="Write your message here"></textarea>
        </div>
        <div class="single-input">
        <button type="submit" class="cr-btn cr-btn--sm cr-btn--transparent cr-btn--icon"><span>send</span></button>
    </div>
</form>

PHP Code:

<?php

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
            $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $subject = trim($_POST["subject"]);
    $phone = trim($_POST["phone"]);
    $message = trim($_POST["message"]);

    // Check that data was sent to the mailer.
    if ( empty($name) OR empty($subject) OR empty($phone) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    // FIXME: Update this to your desired email address.
    $recipient = "akcent.chester@gmail.com";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Subject: $subject\n\n";
    $email_content .= "Phone: $phone\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);
        echo "Thank You! Your message has been sent.";
    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }

} else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

?>

js/ajax-mail.js file:

$(function() {

    // Get the form.
    var form = $('#contact-form');

    // Get the messages div.
    var formMessages = $('.form-message');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.
            $('#contact-form input,#contact-form textarea').val('');
        })
        .fail(function(data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });
    });

});

<?php // Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"]=="POST") {
  // Get the form fields and remove whitespace.
  $name=strip_tags(trim($_POST["name"]));
  $name=str_replace(array("\r", "\n"), array(" ", " "), $name);
  $email=filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
  $phone=trim($_POST["phone"]);
   $subject=trim($_POST["subject"]);
  $message=trim($_POST["message"]);
  // Check that data was sent to the mailer.
  if ( empty($name) OR empty($subject) OR empty($phone) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    // Set a 400 (bad request) response code and exit.
    http_response_code(400);
    echo "Please complete the form and try again.";
    exit;
  }
  // Set the recipient email address.
  // FIXME: Update this to your desired email address.
  $recipient="example@gmail.com";
  // Set the email subject.
  $subject="New contact from $name";
  // Build the email content.
  $email_content="Name: $name\n";
  $email_content .="Email: $email\n\n";
  $email_content .="Phone: $phone\n\n";
  $email_content .="Subject: $subject\n\n";
  $email_content .="Message:\n$message\n";
  // Build the email headers.
  $email_headers="From: $name <$email>";
  // Send the email.
  if (mail($recipient, $subject, $email_content, $email_headers)) {
    // Set a 200 (okay) response code.
    http_response_code(200);
    echo "Thank You! Your message has been sent.";
  }
  else {
    // Set a 500 (internal server error) response code.
    http_response_code(500);
    echo "Oops! Something went wrong and we couldn't send your message.";
  }
}

else {
  // Not a POST request, set a 403 (forbidden) response code.
  http_response_code(403);
  echo "There was a problem with your submission, please try again.";
}

?>

<form id="#contact-form" action="mail.php" method="post">
                                                <div class="single-input">
                                                    <input type="text" name="name" id="comment-name" placeholder="Enter your name">
                                                </div>
                                                <div class="single-input">
                                                    <input type="email" placeholder="Your email">
                                                </div>
                                                <div class="single-input">
                                                    <input type="text" name="phone" placeholder="Phone">
                                                </div>
                                                <div class="single-input">
                                                    <input type="text" name="subject" placeholder="Subject">
                                                </div>
                                                <div class="single-input textarea">
                                                    <textarea cols="3" name="message" rows="3" placeholder="Write your message here"></textarea>
                                                </div>
                                                <div class="single-input">
                                                    <button type="submit" class="cr-btn cr-btn--sm cr-btn--transparent cr-btn--icon"><span>send</span></button>
                                                </div>
                                            </form>

Answer 1

<div class="single-input">
<input type="email" placeholder="Your email">
</div>

This input element is missing a "name" attribute!