Ajax form success and fail message not working

Question

The form on my website is a simple contact form. I would like the form to show a "success & failed" message on the same page when the form is sent/failed without reloading the page. I understand that I should use Ajax to do this but I can't get it to work. It keeps saying failed but the form is sent and is in my inbox.

Here is the code I'm working with.

Html (single page design):

<form accept-charset="UTF-8" action="" class="form" id="contactus" method="post" name="contactus">
  <label for="nametag">Namn*</label> <input id="name" name="name" type="text" value=""> 
  <label for="emailtag">Email*</label> <input id="email" name="email" type="text" value=""> 
  <label for="phonetag">Telefon</label> <input id="phone" name="phone" type="text" value=""> 
  <label for="messagetag">Meddelande*</label><br>
  <textarea id="message" name="message" style="width: 87%; height: 200px;"></textarea> 
<label class="placeholder">&nbsp;</label> <button class="submit" name="submit">Skicka</button>
</form>

<script>

        $(function() {
                $('#contactus').submit(function (event) {
                    event.preventDefault();
                    event.returnValue = false;
                    $.ajax({
                        type: 'POST',
                        url: 'php/mail.php',
                        data: $('#contactus').serialize(),
                        success: function(res) {alert(res);
                            if (res == 'successful') {
                                $('#status').html('Sent').slideDown();
                            }
                            else {
                                $('#status').html('Failed').slideDown();
                            } 
                        },
                        error: function () {
                            $('#status').html('Failed').slideDown();
                        }
                    });
                });
            });
</script>

Php:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    $recipient = "info@mydomain.com";
    $subject = "Webbkontakt";
    $formcontent = "Från: $name <br/> Email: $email <br/> Telefon: $phone <br/> Meddelande: $message";

    $headers = "From: " ."<info@mydomain.com>" . "\r\n";
    $headers .= "Reply-To: ". "no-reply@mydomain.com" . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=utf-8\r\n";

    if(mail($recipient, $subject, $formcontent, $headers))
    {
        echo "successful";
    }
    else
    {
        echo "error";
    }
?>

Answer 1

Put the @ symbol in front of mail. Returns TRUE if the mail was successfully accepted for delivery, FALSE otherwise. It is important to note that just because the mail was accepted for delivery, it does NOT mean the mail will actually reach the intended destination. - in other words, you cannot detect with PHP if the email was sent.

if(@mail($recipient, $subject, $formcontent, $headers))
{
    echo "successful";
}else{
   echo "error";
}

Then change the success and error to the following in the AJAX:

success: function(res) {
    if (res != "successful") { 
        $('#status').html('Failed').slideDown(); 
    } else { 
        $('#status').html('Sent').slideDown(); 
    } 
},

error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert("Error From AJAX"); 
},