PHP mail form with submit message fade in - php

Question

My PHP email form code is working though, but the output after submitting the message is not correct.
After sending a message it is poping an “OK” echo on a blank page (URL www.domain.com/mailform.php), instead of fading out the contact form on the page and fading in the “successful sent” message, without changing the URL.
Where is the bug in the code? :(
HTML
<div class="contact-form-grid">
<form method="post" name="contactForm" id="contactForm" action="sendEmail.php">
<div class="fields-grid">
<div class="styled-input agile-styled-input-top">
<input type="text" for="contactName" id="contactName" name="contactName" required="" />
<label>Dein Name</label></div>
<div class="styled-input agile-styled-input-top">
<input type="text" for="contactTel" name="contactTel" required="" />
<label>Telefon</label></div>
<div class="styled-input">
<input type="email" for="contactEmail" id="contactEmail" name="contactEmail" required="" />
<label>E-Mail</label></div>
<div class="styled-input">
<input type="text" for="contactSubject" id="contactSubject" name="contactSubject" required="" />
<label>Betreff</label></div>
<div class="clearfix"></div>
</div>
<div class="styled-input textarea-grid">
<textarea name="contactMessage" required=""></textarea>
<label>Schreibe hier deine Nachricht!</label></div>
<input type="submit" value="Senden" />
<div id="submit-loader">
<div class="text-loader">Senden...</div>
<div class="s-loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</form>
<div id="message-warning"></div>
<!-- contact-success -->
<div id="message-success">Ihre Nachricht wurde abgeschickt, danke!
<br /></div>
</div>
PHP
<?php
// Replace this with your own email address
$siteOwnersEmail = 'myemail#gmail.com';
if($_POST) {
$name = trim(stripslashes($_POST['contactName']));
$tel = trim(stripslashes($_POST['contactTel']));
$email = trim(stripslashes($_POST['contactEmail']));
$subject = trim(stripslashes($_POST['contactSubject']));
$contact_message = trim(stripslashes($_POST['contactMessage']));
// Check Name
if (strlen($name) < 2) {
$error['name'] = "Bitte geben Sie Ihren Namen ein.";
}
// Check Email
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+#[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
$error['email'] = "Bitte geben Sie eine korrekte E-Mail-Adresse ein.";
}
// Subject
if ($subject == '') { $subject = "Anfrage"; }
// Set Message
$message .= "<strong>" . "Absender: " . "</strong>". $name . "<br />";
$message .= "<strong>" . "Email: " . "</strong>" . $email . "<br /><br />";
$message .= "<strong>" . "Telefon: " . "</strong>" . $tel . "<br /><br />";
$message .= "Nachricht: <br />";
$message .= $contact_message . "<br />";
$message .= "<br /> ----- <br /><i> Gesendet von .... </i></font><br />";
// Set From: header
$from = $name . " <" . $email . ">";
// Email Headers
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8";
if (!$error) {
$mail = mail($siteOwnersEmail, $subject, $message, $headers);
if ($mail) { echo "OK"; }
else { echo "Etwas ging schief! Probiere später nochmal."; }
} # end if - no validation error
else {
$response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
echo $response;
} # end if - there was a validation error
}
?>
JS
/* local validation */
$('#contactForm').validate({
/* submit via ajax */
submitHandler: function(form) {
var sLoader = $('#submit-loader');
$.ajax({
type: "POST",
url: "sendEmail.php",
data: $(form).serialize(),
beforeSend: function() {
sLoader.fadeIn();
},
success: function(msg) {
// Message was sent
if (msg == 'OK') {
sLoader.fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
// There was an error
else {
sLoader.fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
},
error: function() {
sLoader.fadeOut();
$('#message-warning').html("Etwas ging schief! Probiere später nochmal.");
$('#message-warning').fadeIn();
}
});
}
});
I hope someone can help me here :(

Answer 1

Your error is probably in your javascript, is the page refreshing before saying "OK"?
A simpler way to submit a form with ajax is:
$("#form").ajaxForm({
url: "",
beforeSubmit: function() {
},
success: function() {
},
error: function() {
}
});
Did you try this?