A
Anonymous
Guest
Hi guys I'm seriously stressing hard about this. I seem to have written everything properly but my contact form just won't send an e-mail and update the status on my webpage. I fill out the details on my contact form and my status text stays on "Email is sending...". I'd REALLY REALLY appreciate any help you could toss my way. Thanks a ton!
sendmail.php
main.js
contact.html
Hi guys I'm seriously stressing hard about this. I seem to have written everything properly but my contact form just won't send an e-mail and update the status on my webpage. I fill out the details on my contact form and my status text stays on "Email is sending...". I'd REALLY REALLY appreciate any help you could toss my way. Thanks a ton!
sendmail.php
Code:
<?php
$name = @trim(stripslashes($_POST['name']));
$from = @trim(stripslashes($_POST['email']));
$subject = @trim(stripslashes($_POST['subject']));
$message = @trim(stripslashes($_POST['message']));
$to = 'myemail@gmail.com';//replace with your email
$headers = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/plain; charset=iso-8859-1";
$headers[] = "From: {$name} <{$from}>";
$headers[] = "Reply-To: <{$from}>";
$headers[] = "Subject: {$subject}";
$headers[] = "X-Mailer: PHP/".phpversion();
mail($to, $subject, $message, $headers);
die();
?>
main.js
Code:
//Contact Form
var form = $('#contact-form');
form.submit(function(event){
event.preventDefault();
var form_status = $('.form-status');
$.ajax({
url: $(this).attr('action'),
beforeSend: function(){
form_status.find('.form-status-content').html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn();
}
}).done(function(data){
form_status.find('.form-status-content').html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut();
});
});
contact.html
Code:
<form class="form-horizontal" id="contact-form" role="form">
<div class="form-group form-status">
<div class="col-sm-offset-2 col-sm-6">
<div class="form-status-content">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="text" name="name" class="form-control input-lg" placeholder="Name" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="email" name="email" class="form-control input-lg" placeholder="Email" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="text" name="subject" class="form-control input-lg" placeholder="Subject" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<textarea name="message" rows="6" class="form-control input-lg" placeholder="Message" required="required"> </textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-lg btn-transparent">Submit</button>
</div>
</div>
</form>