What is wrong with my sendmail code?

[g0dtier]

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

<?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

//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

<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>

 

Edited February 27, 2020 by g0dtier

[chhorn]

you could have a look at what the server gives you back for that ajax request with console.log(data);

[g0dtier]

Sorry, I'm fairly new to all this. Would you mind helping me with where I'd put that line of code? Thanks and sorry for being a noob

[chhorn]

so if you want to look at some variable, you have to find it first. the variable is "data", and i only see the code you posted, so you hit ctrl+f on this page and type in "data" without the quotes, the only place you find this combination of charaters is within this code

		}).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();
		});

and the variable is provided as a parameter into a function. so you go into this function and place the code i posted there. and hit F12 in your browser, go to console, befor making that request.

[g0dtier]

Okay now I see "Thank you for contact us. As early as possible we will contact you" on my website itself so the data is working but I just don't see any new e-mails.

 

Edit: After adding console.log(data); nothing is shown before making the request. After clicking submit the console simply shows my HTML source code to my whole website. I don't see any errors.

Edit2: My website is http://spanishwithjosh.com and navigate to the Contact page.

Edited February 27, 2020 by g0dtier

[kicken]

Your not sending any of the form data in your ajax request.  All your doing is making a request for the home page.

You'll can use the $.post method rather than $.ajax and send your form data along as the request body.

Something like:

var form = $('#contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('.form-status').find('.form-status-content');

    form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn();
    $.post(form.attr('action'), {
        name: form.find('[name="name"]').val(),
        email: form.find('[name="email"]').val(),
        subject: form.find('[name="subject"]').val(),
        message: form.find('[name="message"]').val()
    }).then(function(){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});