Contact form (Wordpress) won't submit

Question

I am creating a theme in Wordpress, using an Akismet form and a jQuery AJAX script. I have modified all of the relevant areas to integrate into my Wordpress site, even using the Akismet API key that is already there. Here is my code:

Form

<form method="post" id="contact_form">
  <input id="name" type="text" name="name" tabindex="1"/> <label for="name">Name</label>
  <input id="email" type="text" name="email" tabindex="2"/> <label for="email">E-mail</label>
  <input id="website" type="text" name="website" tabindex="3" value="http://" /> <label for="website">Website</label>
  <textarea id="message" tabindex="4" rows="10" cols="60" name="message"></textarea>
  <input type="submit" value="Send E-mail" tabindex="5" />
</form>

jQuery

<script>
$(function() {
    $("#contact_form").submit(function() {
        $.ajax({
            type: "POST",
            url: "<?php bloginfo('template_url'); ?>/inc/email.php",
            data: $(form).serialize(),
            success: function(){
                $('.success').fadeIn(1000);
            }
        });
        return false;
    });
});
</script>

PHP Script

<?php
    require "Akismet.class.php";
    function send_mail( $name, $email, $website, $ip, $is_spam, $message) {
        $subject = '';
        if( $is_spam == true )
            $subject = "[SPAM?]"; 
        $subject .= "[Your_site.com] E-mail received from ".$author_name."//".$author_email."//".$ip;

        wp_mail( get_option('admin_email'), $subject, $message, $name.' <'.$email.'>');
    }
    if(isset($_POST['action'])) {
        $wp_key = get_option( 'wordpress_api_key' );
        $our_url = get_bloginfo( 'url' );

        $name = $_POST['name'];
        $email = $_POST['email'];
        $website = $_POST['website'];
        $message = $_POST['message'];
        $ip = $_SERVER['REMOTE_ADDR'];

        $akismet = new Akismet($our_url, $wp_key);
        $akismet->setCommentAuthor($name);
        $akismet->setCommentAuthorEmail($email);
        $akismet->setCommentAuthorURL($website);
        $akismet->setCommentContent($message);
        $akismet->setUserIP($ip);

        send_mail( $name, $email, $website, $ip, $akismet->isCommentSpam(), $message);
    }

When I submit the form, it processes something and redirects me to a 404 page, even though the URL is the same as the contact page. The email also does not send. Could someone help me with where the issue may lie?

Answer 1

Your form is going to submit before the ajax call even gets a look in. Use preventDefault to stop the default action

$(function() {
    $("#contact_form").submit(function(e) {
       e.preventDefault();
       ...

Edit

I just notice you return false, which should acheive the same result, but sometimes I have notice it does not

You could try preventDefault()