I want a form to send an email where jQuery validates the form and then forwards the data to PHP which should send an email. Only validation works, but nothing else. The jQuery Form Submit script doesn’t work, as well as PHP code. I just can’t figure out what is wrong.
Of course, I know PHP can’t send an email from localhost but I’m using XAMPP for that instance. So it should also work, but the problem is in the code.
// Form Validation - WORKS
$(document).ready(function() {
$("form").validate({
errorPlacement: function(error, element) {
$(element)
.closest("form")
.find("label[for='" + element.attr("id") + "'] > span")
.append(error);
},
errorElement: "span",
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
subject: "required",
msg: "required",
checkbox: "required",
},
messages: {
firstname: "*required",
lastname: "*required",
email: {
required: "*required",
email: "*invalid email address"
},
subject: "*required",
msg: "*required",
checkbox: "*required",
},
submitHandler: function(form) {
form.submit();
}
});
});
// Form Submit - DOESN'T WORK
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'http://127.0.0.1:5500/php/base.php',
data: $('form').serialize(),
success: function() {
alert('Form was submitted.');
$('.send').addClass('send-up');
$('.sent').addClass('sent-up');
setTimeout(function() {
$('.send').removeClass('send-up');
$('.sent').removeClass('sent-up');
}, 2000);
}
});
return false;
});.form {
text-align: right;
font-family: sans-serif;
background: #000;
color: #FFF;
padding: 50px;
}
form {
text-align: left;
}
form li {
position: relative;
margin-bottom: 55px;
list-style-type: none;
}
.li-firstname,
.li-lastname {
width: 44%;
display: inline-block;
}
.li-firstname {
margin-right: 68px;
}
input,
textarea {
background: transparent;
border: 0;
outline: 0;
border-bottom: 2px solid #FFF;
display: block;
color: #FFF;
width: 100%;
padding: 15px 0 15px 30px;
box-sizing: border-box;
transition: border-bottom 0.3s ease-in-out;
resize: none;
}
.label {
position: absolute;
right: 0;
margin-top: 10px;
}
form i {
position: absolute;
bottom: 16.5px;
transition: color 0.3s ease-in-out;
}
.submit {
outline: 0;
border: 0;
color: #FFF;
padding: 0;
width: 243px;
height: 60px;
cursor: pointer;
position: relative;
background: #704DFA;
border-radius: 50px;
text-transform: uppercase;
}
.submit span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.7s ease-out;
}
.send-up {
margin-top: -30px;
opacity: 0;
}
.sent {
margin-top: 30px;
opacity: 0;
}
.sent-up {
margin-top: 0;
opacity: 1;
}
input:focus,
textarea:focus {
border-bottom: 2px solid #704DFA;
}
input:focus+i,
textarea:focus+i {
color: #704DFA;
}
span.error {
font-family: sans-serif;
font-style: italic;
font-size: 13px;
color: #704DFA;
margin-right: 10px;
}
span.error:not(#checkbox-error) {
float: left;
margin-right: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://kit.fontawesome.com/a671c6b423.js" crossorigin="anonymous"></script>
<div class="form">
<form id="form">
<ul>
<li class="li-firstname">
<input type="text" name="firstname" id="firstname" required>
<i class="far fa-user"></i>
<label for="firstname" class="label"><span>First Name</span></label>
</li>
<li class="li-lastname">
<input type="text" name="lastname" id="lastname" required>
<label for="lastname" class="label"><span>Last Name</span></label>
</li>
<li class="li-email">
<input type="email" name="email" id="email" required>
<i class="far fa-envelope"></i>
<label for="email" class="label"><span>Email Address</span></label>
</li>
<li class="li-subject">
<input type="text" name="subject" id="subject" required>
<i class="far fa-question-circle"></i>
<label for="subject" class="label"><span>Subject</span></label>
</li>
<li class="li-message">
<textarea name="msg" id="msg" wrap="hard" rows="5" maxlength="2000" required></textarea>
<i class="far fa-comment-dots"></i>
<label for="msg" class="label"><span>Job Proposal</span></label>
</li>
<li class="li-checkbox">
<input type="checkbox" name="checkbox" id="checkbox" required>
<label for="checkbox">
You want to work with me specifically because you feel my style fits perfectly to your business.
</label>
</li>
</ul>
</form>
<button class="button submit" type="submit" form="form">
<span class="send">Submit</span>
<span class="sent">Sent</span>
</button>
</div><?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$visitor_email = $_POST['email'];
$visitor_subject = $_POST['subject'];
$message = $_POST['msg'];
$checkbox = $_POST['checkbox'];
$email_from = '[email protected]';
$email_subject = $visitor_subject;
$email_body = "You have received a new message from the user $firstname $lastname.n".
"Here is the message:n $message".
$to = "[email protected]";
$headers = "From: $email_from rn";
$headers .= "Reply-To: $visitor_email rn";
mail($to,$email_subject,$email_body,$headers);
?>
