I am using a template to create my portfolio website. At the bottom of this template website, there is a contact me section.
When I try to send my details across through the contact form, it shows a 404 error.
jquery.min.js:2 POST http://localhost:3000/assets/mail/contact_me.php 404 (Not Found)
But when I paste this link in the address bar (http://localhost:3000/assets/mail/contact_me.php), it downloads the contact_me.php file.
Any idea why the POST method returns a 404 error?
Below is the code of the contact from (it's in pug format):
form#contactForm(name='sentMessage', novalidate='novalidate')
.control-group
.form-group.floating-label-form-group.controls.mb-0.pb-2
label Name
input#name.form-control(type='text', placeholder='Name', required='required', data-validation-required-message='Please enter your name.')
p.help-block.text-danger
.control-group
.form-group.floating-label-form-group.controls.mb-0.pb-2
label Email Address
input#email.form-control(type='email', placeholder='Email Address', required='required', data-validation-required-message='Please enter your email address.')
p.help-block.text-danger
.control-group
.form-group.floating-label-form-group.controls.mb-0.pb-2
label Phone Number
input#phone.form-control(type='tel', placeholder='Phone Number', required='required', data-validation-required-message='Please enter your phone number.')
p.help-block.text-danger
.control-group
.form-group.floating-label-form-group.controls.mb-0.pb-2
label Message
textarea#message.form-control(rows='5', placeholder='Message', required='required', data-validation-required-message='Please enter a message.')
p.help-block.text-danger
br
#success
.form-group
button#sendMessageButton.btn.btn-primary.btn-xl(type='submit') Send
Mail should be posted after the input from jQuery. Code of contact_me.js is below:
$(function () {
$(
"#contactForm input,#contactForm textarea,#contactForm button"
).jqBootstrapValidation({
preventSubmit: true,
submitError: function ($form, event, errors) {
// additional error messages or events
},
submitSuccess: function ($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(" ") >= 0) {
firstName = name.split(" ").slice(0, -1).join(" ");
}
$this = $("#sendMessageButton");
$this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
$.ajax({
url: "/assets/mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message,
},
cache: false,
success: function () {
// Success message
$("#success").html("<div class='alert alert-success'>");
$("#success > .alert-success")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-success").append(
"<strong>Your message has been sent. </strong>"
);
$("#success > .alert-success").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
error: function () {
// Fail message
$("#success").html("<div class='alert alert-danger'>");
$("#success > .alert-danger")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-danger").append(
$("<strong>").text(
"Sorry " +
firstName +
", it seems that my mail server is not responding. Please try again later!"
)
);
$("#success > .alert-danger").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
complete: function () {
setTimeout(function () {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
},
});
},
filter: function () {
return $(this).is(":visible");
},
});
$('a[data-toggle="tab"]').click(function (e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$("#name").focus(function () {
$("#success").html("");
});
Below is the code of contact_me.php
<?php
// Check for empty fields
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
http_response_code(500);
exit();
}
$name = strip_tags(htmlspecialchars($_POST['name']));
$email = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = "[email protected]"; // Add your email address in between the "" replacing [email protected] - This is where the form will send a message to.
$subject = "Website Contact Form: $name";
$body = "You have received a new message from your website contact form.
"."Here are the details:
Name: $name
Email: $email
Phone: $phone
Message:
$message";
$header = "From: [email protected]
"; // This is the email address the generated message will be from. We recommend using something like [email protected].
$header .= "Reply-To: $email";
if(!mail($to, $subject, $body, $header))
http_response_code(500);
?>
