Hello Forum,
Please I need someone to look at my code and tell me what I am doing wrong. I have a web form I intend to collect data from and send via email. I am using Javascript for client-side validation and a PHP script to send the email. Also using Ajax to avoid page reload.
My problem is the PHP script doesn’t seem to be working as it isn’t sending the email. Formerly, it was working but the client-side validation script was not working. I seem to only be able to get either the PHP script or the validation script to work.
Please help me see my mistake. The code is below. Thanks!
(You can see the HTML and JavaScript code in this pen - https://codepen.io/obaitan/pen/XWjVyRo)
<html>
<head>
<title>Form submit without refresh</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;200;700&display=swap"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap core CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Material Design Bootstrap -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<form id="contact-form" name="contact-form" method="POST" action="" class="mt-5">
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input
type="text"
id="name1"
name="name1"
class="form-control"
/>
<label for="name1" class="">Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="md-form mb-0">
<input
type="text"
id="email1"
name="email1"
class="form-control"
/>
<label for="email1" class="">Email</label>
</div>
</div>
<div class="col-lg-6">
<div class="md-form mb-0">
<input
name="phone1"
id="phone1"
type="tel"
class="form-control"
placeholder="Phone Number"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input
type="text"
id="subject1"
name="subject1"
class="form-control"
/>
<label for="subject1" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea
type="text"
id="message1"
name="message1"
rows="4"
class="form-control md-textarea"
></textarea>
<label for="message1">Message</label>
</div>
</div>
</div>
<div class="text-md-left">
<button
class="btn btn-success ml-0"
id="form-submit"
type="submit"
>
Send
</button>
</div>
<div class="text-center status" id="status"></div>
</form>
<div class="message_box" style="margin:10px 0px;">
</div>
</div>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<!-- Bootstrap tooltips -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"
></script>
<!-- Bootstrap core JavaScript -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"
></script>
<!-- MDB core JavaScript -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"
></script>
</body>
</html>
<script>
//Email Validation Function
function isValidEmailAddress(emailAddress) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(emailAddress);
}
$(document).ready(function () {
// Form validation and sending with jQuery, AJAX and PHP
var delay = 1000;
$(".btn-success").click(function (e) {
e.preventDefault();
var name = $("#name1").val();
if (name.length < 6) {
$(".status").html(
'<span style="color:red;">Enter Your Full Name!</span>'
);
$("#name1").focus();
return false;
}
var email = $("#email1").val();
if (email == "") {
$(".status").html('<span style="color:red;">Enter Email Address!</span>');
$("#email1").focus();
return false;
}
if (email != "") {
if (!isValidEmailAddress(email)) {
$(".status").html(
'<span style="color:red;">Email Address Provided Is Invalid!</span>'
);
$("#email1").focus();
return false;
}
}
var phone = $("#phone1").val();
if (phone.length < 6) {
$(".status").html(
'<span style="color:red;">Enter A Valid Phone Number!</span>'
);
$("#phone1").focus();
return false;
}
var subject = $("#subject1").val();
if (subject.length < 5) {
$(".status").html(
'<span style="color:red;">Enter A Descriptive Subject!</span>'
);
$("#subject1").focus();
return false;
}
var message = $("#message1").val();
if (message.length <= 100) {
$(".status").html(
'<span style="color:red;">Enter Your Message Here (No Less Than 100 Characters)</span>'
);
$("#message1").focus();
return false;
}
$.ajax({
type: "POST",
url: "ajax.php",
data:
"name=" +
name +
"&email=" +
email +
"&phone=" +
phone +
"&phone=" +
phone +
"&message=" +
message,
beforeSend: function () {
$(".status").html(
'<span style="color: orange; font - weight: bold;">Sending Message...</span >'
);
},
success: function (data) {
setTimeout(function () {
$(".status").html(data);
}, delay);
$("#contact-form")[0].reset();
},
});
});
});
</script>
//This is the PHP “action” script ajax.php
<?php if ( ($_POST['name1']!="") && ($_POST['email1']!="") ){ $name = $_POST['name1']; $email = $_POST['email1']; $phone = $_POST['phone1']; $subject = $_POST['subject1']; $message = $_POST['message1']; $to = "myemail@email.com"; $subject = "AllPHPTricks Contact Form Email"; $message = "New email is received from $name.
$message
"; $host = $_SERVER['SERVER_NAME']; $email_from ="forms@$host"; // Always set content-type when sending HTML email $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; $headers .= "From: .$email_from" . "\r\n"; $headers .= "Reply-To: .$email" . "\r\n"; $sent = mail($to,$subject,$message,$headers); if($sent){ echo " Thank you for contacting us, we will get back to you shortly. "; } else{ echo " Sorry! Your form submission failed. "; } } ?>