my contact form is working properly, it sends e-mail to my server and all, but in the page it does not show "message sent" or "error"! Maybe is something in the php file? I'm posting it all here thank you in advance! my website is www.nausea.ws
EDIT: I made it work, but it only shows the "message not sent, please try again", but it happens that the message was sent! but the "sucess" doesnt show. That means even if the message was successfully sent, it displays the error message.
(function($){
$(document).ready(function() {
$('#submit-form').click(function(e){
e.preventDefault();
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var name = $('#form_name').val(),
email = $('#form_email').val(),
subject = $('#form_subject').val(),
message = $('#form_message').val(),
data_html,
success = $('#success');
if(name == "")
$('#form_name').val('Please enter your name.');
if(subject == "")
$('#form_subject').val('Please enter your name.');
if(email == ""){
$('#form_email').val('Your email is required.');
}else if(reg.test(email) == false){
$('#form_email').val('Invalid Email Address.');
}
if(message == "")
$('#form_message').val('Message is required.');
if(message != "" && name != "" && reg.test(email) != false) {
data_html = "name=" + name + "&email="+ email + "&message=" + message + "&subject="+ subject;
//alert(data_html);
$.ajax({
type: 'POST',
url: 'contact_form.php',
data: data_html,
success: function(msg){
if (msg == 'sent'){
success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>') ;
$('#form_name').val('');
$('#form_email').val('');
$('#form_message').val('');
}else{
success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>') ;
}
}
});
}
return false;
});
});
})(jQuery);textarea {
height:167px;
padding:20px;
margin-bottom:20px;
overflow:auto;
}
.formSecWrap {
float: left;
margin-right: 20px;
}
.formSecWrap2 {
margin-right: 0px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
background: #222222;
border: none;
border-radius: 3px;
color: #fff;
display: block;
margin: 0 0 10px 0;
outline: medium none;
padding: 6px 4px;
width: 370px;
font-family:'Oswald', sans-serif;
font-size: 16px;
font-weight: 400;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
box-shadow: 0 0 7px #fff;
}
.formWrap label{
margin: 0 0 2px 0;
}
.formWrap input[type="submit"]{
margin: 10px 0 20px 0;
float: right;
}
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #7b133c;
border: none;
padding: 4px 12px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 13px;
text-decoration: none;
cursor: pointer;
margin: 0 5px 10px 0;
line-height: 21px;
}
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 10px;
margin-top: 10px;
clear: left;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 3px;
}
.alert h4 {
margin: 0;
}
.alert p {
margin: 0;
}
.alert .close {
position: relative;
top: -2px;
right: -35px;
line-height: 20px;
}
.success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger,
.error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
button.close {
background: none;
border: 0 none;
cursor: pointer;
padding: 0;
}
.close {
color: #000000;
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
opacity: 0.2;
text-shadow: 0 1px 0 #FFFFFF;
}<div id="contact_form">
<div class="two-thirds column marginTop formWrap">
<form action="#" method="post" class="contactForm">
<div class="formSecWrap">
<label for="form_name">name</label>
<input type="text" id="form_name" name="form_name" value="" />
<label for="form_email">email</label>
<input type="text" name="form_email" id="form_email" value="" />
<label for="form_subject">subject</label>
<input type="text" name="form_subject" id="form_subject" value="" />
</div>
<div class="formSecWrap formSecWrap2">
<label for="form_message">message</label>
<textarea class="textarea" name="form_message" id="form_message"></textarea>
<input class="button" id="submit-form" type="submit" name="submit" value="Send Message" />
</div>
<div id="success"></div>
</form>
</div>
</div>PHP:
if($to) {
$name = $_POST['name'];
$email = $_POST['email'];
$fields = array(
0 => array(
'text' => 'Name',
'val' => $_POST['name']
),
1 => array(
'text' => 'Email address',
'val' => $_POST['email']
),
2 => array(
'text' => 'Message',
'val' => $_POST['message']
)
);
$message = "";
foreach($fields as $field) {
$message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>
";
}
$headers = "MIME-Version: 1.0
Content-type: text/html; charset=utf-8
";
$headers .= "From: \"" . $name . "\"
";
$headers .= "Reply-To: " . $email . "
";
$message = utf8_decode($message);
mail($to, $subject, $message, $headers);
if ($message){
echo 'sent';
}else{
echo 'failed';
}
}
</div>
Ok, it is not the best solution, but in the contact_form.js i put this:
//alert(data_html);
$.ajax({
type: 'POST',
url: 'contact_form.php',
data: data_html,
success: function(msg){
if (message == 'sent'){
success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>') ;
$('#form_name').val('');
$('#form_email').val('');
$('#form_message').val('');
}if(message == 'failed'){
success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>') ;
}else{
success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>') ;
}
}
});
}
return false;
});</div>
Is the action really written as # .. if it is, then remove it: (because I don't find something wrong again in your code yet.
<form action="" method="post" class="contactForm">