I've been on the hunt for a solution, but nothing seems to work from other topics I've seen. So, I'm reaching out with my query now. Apologies if it overlaps with another question.
Below is the html markup within <head></head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
....
<style>
.error { display:none; }
.success { display:none; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#send_message').submit(function(e){
e.preventDefault();
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
} else {
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
} else {
$('#email_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
} else {
$('#message_error').fadeOut(500);
} if(error == false){
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
$.post("send_message.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#cf_submit_p').remove();
$('#mail_success').fadeIn(500);
} else {
$('#mail_fail').fadeIn(500);
$('#send_message').removeAttr('disabled').attr('value', 'Send');
}
});
}
});
});
</script>
In the <body></body>
<div class="container-fluid">
<p id="returnmessage"></p>
<form action="send_message.php" id="contactForm" method="post">
<h2 style="font-size:14px;line-height:18px;font-weight:600;padding-bottom:0;">Contact Us</h2>
<ul class="contactform">
<li>
<div id="name_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Please enter your name.</div>
<span class="contact-input-icon" style="text-align:left"><i class="fa fa-user"></i></span>
<div class="input-field">
<input type="text" style="border:1px solid rgba(220,220,220,0.5)" name="name" id="name" value="" class="required requiredField" placeholder="Full Name"/>
</div>
</li>
<li>
<div id="email_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Please enter your email address.</div>
<span class="contact-input-icon"><i class="fa fa-envelope"></i></span>
<div class="input-field">
<input type="email" style="border:1px solid rgba(220,220,220,0.5)" name="email" id="email" value="" class="required requiredField email" placeholder="Email"/>
</div>
</li>
<li class="textarea">
<div id="message_error" class="error" style="color:#aa3939; font-size:8px; line-height:8px;"> <i class="fa fa-exclamation"></i> Please enter your message.</div>
<span class="contact-input-icon"><i class="fa fa-pencil"></i></span>
<div class="input-field">
<textarea name="message" style="border:1px solid rgba(220,220,220,0.5)" id="message" rows="6" cols="20" class="required requiredField" placeholder="Your Message"></textarea>
</div>
<div id="mail_success" class="success" style="color:#00CC00"><i class="fa fa-check"></i> Thank you for your interest. We will be in touch soon.</div>
<div id="mail_fail" class="error" style="color:#aa3939"><i class="fa fa-times"></i> Sorry, your message could not be delivered. Please try again later.</div>
</li>
<li class="buttons">
<input type="hidden" style="border:1px solid rgba(220,220,220,0.5)" name="submitted" id="submitted" value="true" />
<button type="submit" style="border:1px solid #3f97cf" class="button cf_submit_p" id="send_message"><i class="fa fa-paper-plane-o" style="font-size:20px;color:#3f97cf"></i></button>
</li>
</ul>
</form>
</div> <!--end container-fluid-->
and in send_message.php file;
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){
// Gather variables first.
$email_to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9d0ccddccdbc2c8dbc89099e9cec4c8c0c587cac6c4">[email protected]</a>';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$msgTo = "From: $name \r\nEmail: $email \r\nMessage: \r\n$message";
/*$header variable for additional options. This way, when reply or forward,
mailbox knows who to respond to */
$headers = "FROM: $email\r\n";
$headers .= "REPLY-TO: $email\r\n";
if(mail($email_to, $msgTo, $headers)){
echo 'sent';
}else{
echo 'failed';
}
}
?>
There seems to be an issue, despite checking class and ID names multiple times and making adjustments. It appears that the form isn't capturing the values properly. The validation works well, showing success messages after submission and sending emails. However, only the From, Message, Email parts seem to have trouble grabbing the variables.
Could you lend a helping hand?
Best regards,
Vis.