Contact Form 7 được sử dụng phổ biến trên nền tảng WordPress. Sau đây là cách dùng và ứng dụng xử lý các sự kiện liên quan đến form này.

Các sự kiện của Contact Form 7

Sự kiệnMô tả
wpcf7invalid Được bắn ra khi AJAX form được submit nhưng chưa gửi mail vì có trường không hợp lệ.
wpcf7spam Được bắn ra khi AJAX form được submit nhưng chưa gửi mail vì phát hiện có spam.
wpcf7mailfailed Được bắn ra khi AJAX form được submit nhưng gặp lỗi khi gửi mail.
wpcf7mailsent Được bắn ra khi AJAX form được submit và mail đã được gửi thành công.
wpcf7submit Được bắn ra khi AJAX form được submit (bao gồm tất cả những sự kiện trên).

Mã nguồn JavaScript xử lý sự kiện

Các sự kiện của Contact Form 7 được xử lý như các sự kiện bình thường khác bằng JavaSscript.

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    alert( "Fire!" );
}, false );

Dữ liệu trong form được truyền vào handler thông qua biến event.detail.inputs, là một mảng thông tin các dữ liệu đầu vào theo kiểu { name: 'your-field', value: 'value' }.

document.addEventListener( 'wpcf7submit', function( event ) {
    // Lấy dữ liệu form
    var inputs = event.detail.inputs;
 
    for ( var i = 0; i < inputs.length; i++ ) {
        // Xử lý dữ liệu form theo tên
        if ( 'your-name' == inputs[i].name ) {
            alert( inputs[i].value );
            break;
        }
    }
}, false );

Ngoài inputs, Contact Form 7 còn trả về một số thông tin sau:

Thuộc tínhThông tin
detail.contactFormIdID của Form
detail.pluginVersionPhiên bản hiện hành của Contact Form 7
detail.contactFormLocaleMã địa phương (locale) của Form.
detail.unitTagUnit Tag (ID trong post) của Form.
detail.containerPostIdID của post chứa Form.

Xử lý sự kiện Contact Form 7 với jQuery

Nếu sử dụng jQuery, bạn có thể xử lý sự các sự kiện Contact Form 7 như sau. Lưu ý có sự khác biệt ở tên của các sự kiện.

$(".wpcf7").on( 'wpcf7:submit', function( event ) {
    console.log( 'jQuery submit fire...' );
} );

Các sự kiện tương ứng như sau:

Vanilla JavaScriptTên sự kiện khi dùng jQuery
wpcf7invalidwpcf7:invalid
wpcf7spamwpcf7:spam
wpcf7mailfailedwpcf7:mailfailed
wpcf7mailsentwpcf7:mailsent
wpcf7submitwpcf7:submit

Ứng dụng các sự kiện của Contact Form 7

Tạo trigger trên Tag Manager

Tag: WPCF7 Event Handler

/**
 * Contact Form 7 - Submit an event to GTM dataLayer
 */
var wpcf7SendEvent = function(event, eventAction) {
    if (dataLayer) {
        var data = {
            event: eventAction,
            CF7formID: event.detail.contactFormId
        };
        dataLayer.push(data);
    }
};

document.addEventListener('wpcf7invalid', function(event) {
    wpcf7SendEvent(event, 'wpcf7.invalid');
}, false);

document.addEventListener('wpcf7spam', function(event) {
    wpcf7SendEvent(event, 'wpcf7.spam');
}, false);

document.addEventListener('wpcf7mailsent', function(event) {
    wpcf7SendEvent(event, 'wpcf7.mailsent');
}, false);

document.addEventListener('wpcf7mailfailed', function(event) {
    wpcf7SendEvent(event, 'wpcf7.mailfailed');
}, false);

document.addEventListener('wpcf7submit', function(event) {
    wpcf7SendEvent(event, 'wpcf7.submit');
}, false);

Variable: DLV – CF7formID

Tạo biến dataLayer DLV - CF7formID để lấy thông tin về Form ID được truyền lên khi sự kiện của Contact Form 7 diễn ra.

Tạo các biến dataLayer khác tương tự nếu có.

Trigger: WPCF7 Event

Kích hoạt thank you page

Dưới đây là mã nguồn plugin cho phép tự động redirect sang thank you page sau khi Contact Form 7 được submit và email được gửi đi thành công.

Thank You Page được thiết lập trong cấu hình bài viết (Thiết lập này được tạo nhờ plugin Advanced Custom Fields). Nếu để trống URL thì chức năngThank You Page sẽ không hoạt động.

icreativ-wpcf7typ.php

<?php
/*
 Plugin Name: iCreativ WPCF7 Thank You Page
 Plugin URI: https://icreativ.pro
 Description: Redirect to a specific thank you page when a CF7 form submission is completed.
 Version: 1.0
 Author: Nguyen Hong Hai
 Author URI: https://icreativ.pro
 License: APACHE2.0
 */
/**
 * Initialize the Thank you page parameters in JavaScript.
 */
function icreativ_wpcf7_init_thank_you_page() {
    if ( is_singular() ) :
        global $post;

        // URL of the current post
        $cur_page = get_permalink();
        $url = '';

        // If Advanced Custom Fields plugin is installed and there exists a field named `thank-you-page-url`
        if (function_exists('get_field') ) :
            $url = get_field('thank-you-page-url');
        endif;

        // Thank you page URL is defined in WP_THANK_YOU_PAGE in wp-config.php
        if ( empty($url) && defined('WP_THANK_YOU_PAGE') ) :
            $url = WP_THANK_YOU_PAGE;
        endif;

        // By default, set the current post as the Thank you page
        if ( empty($url) ) :
            $url = $cur_page;
        endif;

        // Create a JavaScript object named `wpcf7_thank_you_page` in which
        // the parameters will be passed to the Thank you page.
        if ( filter_var($url, FILTER_VALIDATE_URL) ) :
            wp_localize_script( 'thank-you-page', 'wpcf7_thank_you_page', array(
                'url' => $url,
                'params' => array(
                    'typ_source' => 'wpcf7', // Contact Form 7
                    'typ_postid' => get_the_ID(), // ID of the post
                    // ... more parameters ... //
                )
            ) );
        endif;
    endif;
}

/**
 * Redirect to the Thank you page (plus some parameters) when 
 * Contact Form 7 submission is completed and an email is sent
 * successfully.
 */
function icreativ_wpcf7_load_thank_you_page() {
    global $post;

    if ( is_singular() ) :
?>
<script>
document.addEventListener("wpcf7mailsent", function(event) {
    if ('undefined' !== typeof wpcf7_thank_you_page) {
        var form = document.createElement("FORM");
        for (var key in wpcf7_thank_you_page.params) {
            var input = document.createElement("INPUT");
            input.type = "hidden";
            input.name = key;
            input.value = params[key];
            form.appendChild(input);
        }
        form.action = wpcf7_thank_you_page.url;
        document.body.appendChild(form);
        form.submit();
    }
});
</script>
<?php
    endif;
}
?>