Init HTML

Xem demo

Đầu tiên, bạn tạo một Template với tên tập tin template-contact.php.

<?php
    /* Template Name: Contact */
    get_header();
?>
<?php
    get_footer();
?>

HTML

<div id="contact-form" class="contact-form">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input id="name" type="email" class="form-control" placeholder="Tên của bạn">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
            <input id="email" type="text" class="form-control" placeholder="Địa chỉ thư địa tử">
        </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <textarea id="message" class="form-control" rows="8" placeholder="Nội dung tin nhắn"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group m-b-0-i">
                <button id="send-message" class="main-banner-btn"><span class="glyphicon glyphicon-send m-r-1"></span> Gửi Tin Nhắn</button>
            </div>
    </div>
    </div>
</div>

PHP

Tại functions.php, thêm phương thức xử lí tin nhắn.

add_action('wp_ajax_contact', 'post_contact');
add_action('wp_ajax_nopriv_contact', 'post_contact');
function post_contact() {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    if ($name != '' && $email != '' && $message != '') {
        $contact_page = get_page_by_path('lien-he');
        $time = current_time('mysql');
        $data = array(
            'comment_post_ID' => $contact_page->ID,
            'comment_author' => sanitize_text_field($name),
            'comment_author_email' => sanitize_text_field($email),
            'comment_content' => sanitize_text_field($message),
            'comment_date' => $time,
            'comment_approved' => 0
        );
        wp_insert_comment($data);
        $result = array('done' => 'true');
    } else {
        $result = array('done' => 'false');
    }
    wp_send_json_success($result);
    die();
}

JS

<script type="text/javascript">
	$('#send-message').click(function() {
        if ($('#name').val() == '') {
            $('#name').parent('.form-group').addClass('has-error');
        } else if ($('#email').val() == '') {
            $('#email').parent('.form-group').addClass('has-error');
        } else if (!validateEmail($('#email').val())) {
            $('#email').parent('.form-group').addClass('has-error');
        } else if ($('#message').val() == '') {
            $('#message').parent('.form-group').addClass('has-error');
        } else {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: ajaxURL,
                data: {
                    'action': 'contact',
                    'name': $('#name').val(),
                    'email': $('#email').val(),
                    'message': $('#message').val()
                },
                success: function(response) {
                    if(response.success) {
                        if (response.data.done == 'true') {
                            $('#name').val('');
                            $('#email').val('');
                            $('#message').val('');
                            $('#result-mess').addClass('text-success').html('<i class="glyphicon glyphicon-ok m-r-1"></i> Tin nhắn của bạn đã được gửi thành công, chúng tôi sẽ liên hệ lại trong thời gian sớm nhất!');
                        } else {
                            $('#result-mess').addClass('text-danger').html('<i class="glyphicon glyphicon-remove m-r-1"></i> Có lỗi xảy ra, vui lòng thử lại sau!');
                        }
                    }
                }
            });
        }
    });

    $('#name, #email, #message').keyup(function() {
        $(this).parent('.form-group').removeClass('has-error');
    });

    // Xác thực định dạng của Email
    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }
</script>

Chúc các bạn thành công!