I have setup a "contact me" form on my website and it doesn't work. Here is the code :
Form Markup :
<form class="contactform" method="post" action="php/process-form.php">
<div class="row">
<!-- Name Field Starts -->
<div class="form-group col-xl-6"> <i class="fa fa-user prefix"></i>
<input id="name" name="name" type="text" class="form-control" placeholder="YOUR NAME" required>
</div>
<!-- Name Field Ends -->
<!-- Email Field Starts -->
<div class="form-group col-xl-6"> <i class="fa fa-envelope prefix"></i>
<input id="email" type="email" name="email" class="form-control" placeholder="YOUR EMAIL" required>
</div>
<!-- Email Field Ends -->
<!-- Comment Textarea Starts -->
<div class="form-group col-xl-12"> <i class="fa fa-comments prefix"></i>
<textarea id="comment" name="comment" class="form-control" placeholder="YOUR MESSAGE" required></textarea>
</div>
<!-- Comment Textarea Ends -->
</div>
<!-- Submit Form Button Starts -->
<div class="submit-form">
<button class="btn button-animated" type="submit" name="send"><span><i class="fa fa-send"></i> Send Message</span></button>
</div>
<!-- Submit Form Button Ends -->
<div class="form-message"> <span class="output_message text-center font-weight-600 uppercase"></span>
</div>
</form>
process-form.php :
<?php
if (isset($_REQUEST['name'],$_REQUEST['email'])) {
$name = $_REQUEST['name'];
$mail = $_REQUEST['email'];
$message = $_REQUEST['comment'];
$to = 'redacted@for.privacy';
$subject = 'Contact From My Website';
$headers = "From: ".$name." <".$mail."> \r\n";
$send_email = mail($to,$subject,$message,$headers);
echo ($send_email) ? 'success' : 'error';
}
?>
AJAX :
$(".contactform").on("submit", function() {
$(".output_message").text("Loading...");
var form = $(this);
$.ajax({
url: form.attr("action"),
method: form.attr("method"),
data: form.serialize(),
success: function(result) {
if (result == "success") {
$(".form-inputs").css("display", "none");
$(".box p").css("display", "none");
$(".contactform").find(".output_message").addClass("success");
$(".output_message").text("Message Sent!");
} else {
$(".tabs-container").css("height", "440px");
$(".contactform").find(".output_message").addClass("error");
$(".output_message").text("Error Sending!");
}
}
});
return false;
});
Error message from the ajax shows and I don't receive any mail. This code should be correct but I read that I needed an smtp configuration ? I can setup such a thing in my google business email but I don't know how and how to implement it on the website.