Hope you are having a good day. I have a problem of PHP and JS contact form. They failed to send the form to my e-mail address. I have read all the articles related to my problems but it didn’t seem to solve the issue. Please help 🙁
PHP Code
`
<?php
// specify your email here
$to = '[email protected]';
// Assigning data from $_POST array to variables
if (isset($_POST['name'])) { $name = $_POST['name']; }
if (isset($_POST['email'])) { $from = $_POST['email']; }
if (isset($_POST['number'])) { $number = $_POST['number']; }
if (isset($_POST['title'])) { $title = $_POST['title']; }
if (isset($_POST['message'])) { $message = $_POST['message']; }
// Construct subject of the email
$subject = 'Inquiries from ' . $number;
// Construct email body
$body_message .= 'Name: ' . $name . "rn";
$body_message .= 'Email: ' . $from . "rn";
$body_message .= 'Phone: ' . $number . "rn";
$body_message .= 'Subject: ' . $title . "rn";
$body_message .= 'Message: ' . $message . "rn";
// Construct headers of the message
$headers = 'From: ' . $from . "rn";
$headers .= 'Reply-To: ' . $from . "rn";
$mail_sent = mail($to, $subject, $body_message, $headers);
if ($mail_sent == true){ ?>
<script language="javascript" type="text/javascript">
window.alert("Thank you! We'll be in touch soon!");
</script>
<?php } else { ?>
<script language="javascript" type="text/javascript">
window.alert("Error! Please Try Again Later.");
</script>
<?php
} // End else
?>
`
Javascript
`
function checkmail(input){
var pattern1=/^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
if(pattern1.test(input)){ return true; }else{ return false; }}
function proceed(){
var name = document.getElementById("name");
var email = document.getElementById("email");
var number = document.getElementById("number");
var title = document.getElementById("title");
var msg = document.getElementById("message");
var errors = "";
if(name.value == ""){
name.className = 'error';
return false;}
else if(email.value == ""){
email.className = 'error';
return false;}
else if(checkmail(email.value)==false){
alert('Please provide a valid email address.');
return false;}
else if(number.value == ""){
number.className = 'error';
return false;}
else if(title.value == ""){
title.className = 'error';
return false;}
else if(msg.value == ""){
msg.className = 'error';
return false;}
else
{
$.ajax({
type: "POST",
url: "php/submit.php",
data: $("#contact_form").serialize(),
success: function(msg){
//alert(msg);
if(msg){
$('#contact_form').fadeOut(1000);
$('#contact_message').fadeIn(1000);
document.getElementById("contact_message");
return true;
}}
});
}};
`
HTML
`
<!--======= Contact Section =========-->
<section class="sectoion-100px contact">
<div class="container">
<!-- Tittle -->
<div class="tittle">
<h4>CONTACT US</h4>
<p>Feel free to ask anything</p>
</div>
<div class="contact-form">
<!--======= FORM =========-->
<form role="form" id="contact_form" class="contact-form" method="post" onSubmit="return proceed()" action="php/submit.php">
<div class="row">
<div class="col-md-12">
<ul class="row">
<li class="col-sm-6">
<label>
<span class="required">
<input type="text" class="form-control" name="name" id="name" placeholder="*Name" minlength="2" required="required">
</span>
</label>
</li>
<li class="col-sm-6">
<label>
<span class="required">
<input type="email" class="form-control" name="email" id="email" placeholder="*E-mail" pattern="^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" oninvalid="setCustomValidity('Invalid e-mail')" oninput="setCustomValidity('')" required="required">
</span>
</label>
</li>
<li class="col-sm-6">
<label>
<span class="required">
<input type="tel" class="form-control" name="number" id="number" placeholder="*Mobile" pattern="^[0]d{9,11}$" oninvalid="setCustomValidity('Invalid phone number')" oninput="setCustomValidity('')" minlength="10" required="required">
</span>
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="title" id="title" placeholder="Subject">
</label>
</li>
</ul>
</div>
<div class="col-md-12">
<ul class="row">
<li class="col-sm-12">
<label>
<span class="required">
<textarea class="form-control" name="message" id="message" rows="1" placeholder="*Message" minlength="10" required="required"></textarea>
</span>
</label>
</li>
<li class="col-sm-12 no-margin">
<button type="submit" value="submit" class="btn" id="btn_submit">Send</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
`
I have read the articles, tried to follow as advised, but.. it didn’t work for me 🙁
I tried everything but it keeps on showing error.
Also, how to show the success window alert if it’s succeeded?
It only shows the error alert.