How do I get my AJAX email in Wordpress to work

Question

Good Afternoon,

I am having an extremely frustrating issue. I am currently trying to use an AJAX function to send an email from within a contact form in my Wordpress site. It only sends the email when none of the fields have been filled, but from the moment I try to submit data within the form fields, the email does not send.

Additionally, for some reason it seems to work when I am running it from outside the Wordpress environment, but from the moment I included it in the wordpress template file, then the problem starts to occur.

Here is my code below. Forgive the fact that at the moment there isn't any error or spam handling:

This is the Javascript:

        $(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this),
            formData = form.serialize(),
            formUrl = form.attr('action'),
            formMethod = form.attr('method'),
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200)
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data),
                        klass = '';

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            })


            return false;
        })
    })

and this is the php

    if (isset($_GET['action'])) {

    if($_GET['action'] == 'email') {
        $name = $_POST['name'];
        $email = mysql_real_escape_string($_POST['email']);
        $message = $_POST['message'];

        $m1 = "Name of customer: " . $name . "\n";
        $m2 = "Customer's Email: " . $email . "\n";
        $m3 = "Message: " . $message;
        $emailmessage = $m1 . $m2 . $m3;

        mail('seedorf@me.com', 'Message from LUNASKYMODA.CO.UK contact page', $emailmessage);

        $data = array(  
                'status' => $status,  
                'message' => $message  
            );

        echo json_encode($data);

    exit;
    }
}

The web page in question is http://lunaskymoda.co.uk/contact-us/

Ps, If it says "Message Sent" does not necessarily means that it sends.. Still working on that too.

Answer 1

Ok, you have a lot of different stuff going on. First, this is jQuery code (a javascript library) and your code is missing semi-colons all over the place. Try this:

$(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this);
            formData = form.serialize();
            formUrl = form.attr('action');
            formMethod = form.attr('method');
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200);
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data);
                    // klass = ''; <--what is this? you don't define 'klass' anywhere

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            });


            return false;
        });
    });

Second, as soon as I pull up your site I get this error in console:

Uncaught TypeError: Object [object Object] has no method 'livequery' wp-e-commerce.js:273

So your site has javascript errors before you even submit the script. Try and clear all errors as javascript has a way of breaking and not working at all if there are errors higher up in the chain.

Third, when I submit the form I get this error:

POST http://lunaskymoda.co.uk/contact-us/?action=email 404 (Not Found)

This could be either a) because your JS is broken from the second error or b) because you still have html form actions when you are using jQuery to process the form. So:

Fourth, change your form tag from this:

<form id="emailform" action="?action=email" method="post" accept-charset="utf-8" novalidate="novalidate">

to the following:

<form id="emailform">

All this should get you on the right track. Troubleshooting JS becomes a lot easier when you look in the console for errors. In chrome just right click anywhere and click "inspect element", then click "console". In FireFox download the 'firebug' add on. Troubleshooting JS without console is like working in the dark.

Answer 2

Seems your contact form's action parameter is not placed properly.

Check this for ref:

http://www.wp-themix.org/wordpress/how-to-add-a-jquery-ajax-contact-form-to-wordpress/