Send mail form with AJAX (JavaScript & PHP) doesn't work

February 18, 2021 by admin

I’m new to Stack Overflow.
I’m trying to have a simple e-mail form on my website, so I’ve copied one but can’t get it to work. The "Send" button just doesn’t seem to do anything.
I am not a programmer and know very little about code

A friend told me it’s as if the PHP isn’t recognized.

HTML code

<form id="contact-form" action="" method="POST" class="tm-contact-form">
    <div class="form-group">
        <input type="text" name="name" class="form-control rounded-0" placeholder="Full Name" required />
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control rounded-0" placeholder="Email" required />
    </div>
    <div class="form-group">
        <select class="form-control" id="contact-select" name="inquiry">
            <option value="-">Subject</option>
            <option value="3DPrints">3D Prints</option>
            <option value="AmpsEffects">Amps &amp; Effect Pedals</option>
            <option value="Other">Other</option>
        </select>
    </div>
    <div class="form-group">
        <textarea rows="8" style="resize: none;" name="message" class="form-control rounded-0" placeholder="Message" required></textarea>
    </div>
    <div class="form-group mb-4">
        <div id="result-message" class="alert alert-success d-none">Send result message will display here</div>
    </div>
    <div class="form-group tm-text-right">
        <button type="submit" class="tm-btn tm-btn-primary">Send</button>
    </div>
</form>

JS file

$(function () {    
    $("#contact-form").submit(function (e) {
        e.preventDefault();
        var form_data = $(this).serialize(); 
        $.ajax({
            type: "POST", 
            url: "js/call-form.php",
            dataType: "text/json", // Add datatype
            data: form_data
        }).done(function (data) {
            console.log(data);
            alert("It's OK!");
        }).fail(function (data) {
            console.log(data);
            alert("It's not OK!");
        });
    }); 
});

PHP file

if ((isset($_POST['name'])) && (isset($_POST['email'])) && (isset($_POST['inquiry'])) && (isset($_POST['message']))) { 
    $to = 'info@hemmelaudio.com';
    $subject = '.$_POST['inquiry'].';
    $message = '<html>
            <head>
                <title>'.$_POST['inquiry'].'</title>
            </head>
            <body>
                <p><b>From:</b> '.$_POST['name'].'</p>
                <p><b>Email:</b> '.$_POST['email'].'</p><br>
                <p>'.$_POST['message'].'</p>
            </body>
        </html>'; 
  $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
/* $headers .= "From: Hemmelaudio.com\r\n"; */
mail($to, $subject, $message, $headers);

  echo json_encode(array('status' => 'success'));
} else {
  echo json_encode(array('status' => 'error'));
}

I have put the PHP file with 755 permissions.

Please help!
Thanks