Very slow contact form response (PHP/jQuery/Ajax)

Question

I'm setting up an extremely basic PHP/jQuery/Ajax contact form; and while it is working, the response is extremely slow (5+ seconds for the success message to show) and I'm wondering what I might be doing wrong.

Here is all the relevant code:

Markup:

<form id="contact-form" name="contact-form" action="php/form-process.php" method="post" role="form">
    <input type="text" name="name" id="name" placeholder="Name" required>
    <input type="email" name="email" id="email" placeholder="Email" required>
    <textarea id="message" name="message" rows="5" placeholder="Your message" required></textarea>
    <button type="submit" id="form-submit" class="contact-button">Submit</button>
    <div id="msg-submit" class="hidden">Message sumbitted!</div>
</form>

PHP:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "test@test.com";
$Subject = "New Contact Form Message";

// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}

?>

jQuery:

$('#contact-form').submit(function(event){
        event.preventDefault();
        submitForm(); 
    });

    function submitForm(){
        var $this = $('#contact-form');
        $.ajax({
            type: $this.attr('method'),
            url: $this.attr('action'),
            data: $this.serialize(),
            success : function(text){
                if (text == "success"){
                    formSuccess();
                }
            }
        });
    }
    function formSuccess(){
        $("#msg-submit").removeClass("hidden");
    }

I'm leaving out all form validation functionality to stick to the absolute basics. I'm not sure if it's the server causing the slow response, but ideally, I'd like the success message to show as soon as the user clicks submit. Thanks for any assistance here.

Answer 1

Did you try to comment out
$success = mail($EmailTo, $Subject, $Body, "From:".$email); ?

I might be wrong, but, sending email might take a few seconds
i suggest you to send email using other ajax request.

---

Because PHP is not async language, at least by default.

1. First PHP script: receive datas from JS, and respond with 200(success)
   jQuery will trigger 'success' event before sending Email.
   this will not block or bother you and other users.

2. Second PHP script: just to send Email, without modal and etc.

---

   $.ajax({
        //here, you could send some infos to  use with DB, check if
       //datas, e-mail is valid with filter_var($email, FILTER_VALIDATE_EMAIL), etc..
        type: $this.attr('method'),
        url: $this.attr('action'),
        data: $this.serialize(), 
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });
   function formSuccess(){
       $("#msg-submit").removeClass("hidden");
       $.ajax({
        //here, you could send some infos to build and send Email
        //It's right, because the first ajax did succeed right ?
        type: $this.attr('method'),
        url: $this.attr('action'),
        data: $this.serialize(), 
        success : function(text){
            //yey :D
        }
   }

Answer 2

I'm going to assume you're assuming PHPMailer, but correct me if I'm wrong. If not, consider using that to implement this next part.

Your PHP script is waiting for the email to be sent. That's not how it should be done. You need to send it using a mail server. See this superb answer on how to do that using PHPMailer.

Answer 3

@nickpish

you have php, jquery and ajax. the issue with the bottleneck can either be the front-end or the backend. you need a powerful tool in order to debug the issue. if you have an error in your jquery there is no way to figure that out. in addition, if you have a backend issue, that can cause your jquery to take more time in responding back to your front-end ui. if you look at the image below

you need to use something like firefox, (right click anywhere on your ui and select [Inspect Element Q] click on the net panel and choose XHR. in the console window you'll see if there are any errors; furthermore, you'll notice your back-end php file and it'll give you a response time.

if the back-end script is too slow, you can go into your back-end file. you have a mail function, maybe it's the server that's taking too long. you may need to switch out your smtp to something faster or leave it as is. if you choose to stay with your current smtp that may take time, you should think of putting a progress window meanwhile.