0
votes

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>
1

1 Answers

0
votes

Usually the values you send in the data {} of an ajax call should be quoted, as they are part of a JSON object. I think the data object is assuming that you have text values in there, and isn't adding the jQuery values from the form fields because it doesn't know that the Name should be the key to that value. For example, I would try changing it to this:

$.ajax({
    type: 'POST',
    url: "sendemail.php",
    data: {
        "Name": $("#name").val(), // change this line to have quotes around the key
        "Email": $("#email").val(), // change this line to have quotes around the key
        "Message": $("#message").val() // change this line to have quotes around the key

    }
 // the rest of the code here like you have it.

If that isn't the issue, I would also try console.log($("#name").val()) each value before sending, to be sure they contain the values you expect them to, and then you will know that this is not the problem as well.