WORDPRESS Ajax contact-form

gistfile1.html

<!-- contactform.php -->

<div class="cf" id="cf">
    <form action="javascript:void(0);">
        <div><input type="text" name="name" placeholder="Name"/><span class="error"></span></div>
        <div><input type="text" name="email" placeholder="Email"/><span class="error"></span></div>
        <div><textarea name="message" placeholder="Message"></textarea><span class="error"></span></div>
        <div><button type="submit">Submit</button> <span class="loader"></span></div>
    </form>
</div>

gistfile2.php

<?php
/*
    functions.php
*/

function prefix_cf() {
    // Filter POST data
    $data = array();
    $data['name'] = filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING);
    $data['email'] = filter_var(trim($_POST['email']), FILTER_SANITIZE_STRING);
    $data['email'] = filter_var($data['email'], FILTER_SANITIZE_EMAIL);
    $data['message'] = filter_var(trim($_POST['message']), FILTER_SANITIZE_STRING);

    // Validate data
    if ( $data['name'] == '' ) $error['name'] = 'Please enter your name';
    if ( $data['email'] == '' ) {
        $error['email'] = 'Please enter your email';
    } elseif ( filter_var($data['email'], FILTER_VALIDATE_EMAIL) == false ) {
        $error['email'] = 'Please enter a valid email address';
    }
    if ( $data['message'] == '' ) $error['message'] = 'Please enter your message';

    if ( !empty($error) ) {
        $response['status'] = 'error';
        foreach ( $error as $key=>$val ) {
            $response[$key] = $val;
        }
    } else {
        $mailto = '[email protected]';
        $from = 'YourSite <[email protected]>';
        $subject = 'New message from YourSite';

        $message = '<p><b>Name:</b> '.$data['name'].'<br/><b>Email:</b> '.$data['email'].'<br/><b>Message:</b> '.$data['message'].'</p>';

        $headers = "From: $from\r\n";
        $headers.= "MIME-Version: 1.0\r\n";
        $headers.= "Content-Type: text/html; charset=utf-8\r\n";
        $headers.= "X-Priority: 1\r\n";

        mail($mailto, $subject, $message, $headers);
        $response = array(
            'status' => 'success',
            'text' => 'Thanks for your message!'
        );
    }

    die(json_encode($response));
}
add_action('wp_ajax_nopriv_prefix_cf', 'prefix_cf');
add_action('wp_ajax_prefix_cf', 'prefix_cf');

function prefix_shortcode_cf( $atts, $content = null, $code ) {
    return file_get_contents(TEMPLATEPATH.'/contactform.php');
}
add_shortcode( 'cf', 'prefix_shortcode_cf' );

gistfile3.js

(function($) {
    $(function() {
        // Contact Form
        var cf = $('#cf');
        $('input[name="name"], input[name="email"], textarea[name="message"]', cf).focus(function(){
            $(this).next('.error').text('');
        });
        $('form', cf).submit(function(){
            $('.loader', cf).css('visibility','visible');
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/wp-admin/admin-ajax.php',
                data: {
                    action: 'prefix_cf',
                    name: $('input[name="name"]', cf).val(),
                    email: $('input[name="email"]', cf).val(),
                    message: $('textarea[name="message"]', cf).val()
                },
                success: function (data, textStatus, XMLHttpRequest) {
                    $('.loader', cf).css('visibility','hidden');
                    if ( data.status == 'error' ) {
                        if ( data.name ) $('input[name="name"]', cf).next('.error').text(data.name);
                        if ( data.email ) $('input[name="email"]', cf).next('.error').text(data.email);
                        if ( data.message ) $('textarea[name="message"]', cf).next('.error').text(data.message);
                    } else if ( data.status == 'success' ) {
                        $('form', cf).slideUp(400, function(){
                            cf.append('<p class="success">'+data.text+'</p>');
                        })
                    }
                }
            });
        });
    })
})(jQuery)

gistfile4.css

.cf {margin: 20px 0;}
.cf form div {margin: 15px 0;}
.cf form .error {color: red; margin-left: 15px;}
.cf .success {color: #008f24;}
.cf input, .cf textarea {display: inline-block; padding: 5px 10px; border: 1px solid #bababa; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cf input {width: 200px;}
.cf textarea {width: 400px; height: 150px; overflow: auto;}
.cf button {font-weight: bold; border: none; background: #faa209; padding: 8px 20px; color: #000; text-transform: uppercase; outline: none; position: relative;}
.cf button:active {top: 1px;}
.cf .loader {display: inline-block; visibility: hidden; width: 16px; height: 11px; margin-left: 15px; background: url("images/ajax-loader.gif") 0 0 no-repeat;}