I am trying to make a functional contact form for my website. However, when I send a test email to my email address, non of the form information is sent through. The email that I receive reads "Name: Email: Message:". There is no information that is getting sent through and I can't figure out what the missing link is.
Here is my PHP:
<?php
ini_set("mail.log", "/tmp/mail.log");
ini_set("mail.add_x_header", TRUE);
//variables
$name = strip_tags(htmlspecialchars($_POST['Name']));
$email_address = strip_tags(htmlspecialchars($_POST['Email']));
$message = strip_tags(htmlspecialchars($_POST['Message']));
// Create the email and send the message
$to = '[email protected]'; // Add your email address inbetween the '' replacing [email protected] - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from example... contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: [email protected]\n"; // This is the email address the generated message will be from. We recommend using something like [email protected].
$headers .= "Reply-To: $email_address";
if(mail($to,$email_subject,$email_body,$headers)){ echo "Mail sent!";} else{ echo "Error, check your logs."; }
return true;
And the rest of my code:
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var name = $('.validate-input input[name="name"]');
var email = $('.validate-input input[name="email"]');
var subject = $('.validate-input input[name="subject"]');
var message = $('.validate-input textarea[name="message"]');
$('.validate-form').on('submit',function(){
var check = true;
if($(name).val().trim() == ''){
showValidate(name);
check=false;
}
if($(subject).val().trim() == ''){
showValidate(subject);
check=false;
}
if($(email).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
showValidate(email);
check=false;
}
if($(message).val().trim() == ''){
showValidate(message);
check=false;
}
return check;
});
$('.validate-form .input1').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);
var form = $('#form'); //form id here
form.submit(function(event) {
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
var $form = $(this);
$.ajax({
type: 'POST',
url: "sendemail.php",
data: {
Name: $("#name").val(),
Email: $("#email").val(),
Message: $("#message").val()
},
beforeSend: function() {
form.append(form_status.html('Email is sending...').fadeIn());
}
}).done(function(data) {
form_status.html('Email Sent!').delay(3210).fadeOut();
});
//delete messages when submit
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("message").value = "";
});
<!DOCTYPE html>
<html lang="en">
<head>
<title> Contact Us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
</head>
<body>
<form class="contact1-form validate-form" action="sendemail.php"method="post">
<span class="contact1-form-title">
Get in touch
</span>
<div class="wrap-input1 validate-input" data-validate = "Name is required">
<input class="input1" id="name" type="text" name="name" placeholder="Name">
<span class="shadow-input1"></span>
</div>
<div class="wrap-input1 validate-input" data-validate = "Valid email is required: [email protected]">
<input class="input1" id="email" type="text" name="email" placeholder="Email">
<span class="shadow-input1"></span>
</div>
<div class="wrap-input1 validate-input" data-validate = "Subject is required">
<input class="input1" id="subject" type="text" name="subject" placeholder="Subject">
<span class="shadow-input1"></span>
</div>
<div class="wrap-input1 validate-input" data-validate = "Message is required">
<textarea class="input1" id="message" name="message" placeholder="Message"></textarea>
<span class="shadow-input1"></span>
</div>
<div class="container-contact1-form-btn">
<button class="contact1-form-btn">
<span>
Send Email
<i class="fas fa-long-arrow-alt-right"><aria-hidden="true"></i>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid map">
<div class="row">
<div class="col-xs-4 col-sm-2 col-md-4 col-lg-3 col-xl-4"></div>
<div class="col-xs-4 col-sm-8 col-md-4 col-lg-6 col-xl-4">
</div>
<div class="col-xs-4 col-sm-2 col-md-4 col-lg-3 col-xl-4"></div>
</div>
</div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>