Tối ưu Contact Form 7 bằng code tùy chỉnh: Giải pháp thay thế plugin

Contact Form 7 (CF7) là lựa chọn phổ biến nhất để xây dựng biểu mẫu trên WordPress nhờ sự đơn giản và linh hoạt. Tuy nhiên, các tính năng nâng cao thường bị hạn chế, buộc người dùng phải cài thêm các plugin bổ trợ, điều này vô tình làm tăng dung lượng và ảnh hưởng đến tốc độ tải trang.

Tại STAR WAR Digital Solutions, chúng tôi ưu tiên sử dụng code tùy chỉnh trực tiếp vào functions.php để tối ưu hiệu năng. Dưới đây là các kỹ thuật giúp bạn mở rộng tính năng cho CF7 mà không cần cài đặt thêm bất kỳ plugin nào.

1. Chuyển hướng người dùng sau khi gửi form thành công

Việc chuyển hướng người dùng đến trang "Cảm ơn" (Thank you page) giúp bạn dễ dàng đo lường chuyển đổi qua Google Analytics hoặc Facebook Pixel. Đoạn code dưới đây sẽ thực hiện điều đó ngay khi form gửi đi thành công.

add_action( 'wp_footer', 'redirect_cf7' );
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://domain-cua-ban.com/cam-on/'; // Thay bằng URL trang đích của bạn
}, false );
</script>
<?php
}

2. Ghi lại nguồn truy cập (Referer) của khách hàng

Để biết khách hàng đến từ nguồn nào (Facebook, Google, hay các trang giới thiệu khác), bạn có thể sử dụng kỹ thuật lấy thông tin từ HTTP_REFERER và lưu vào một trường ẩn trong form.

Bước 1: Thêm đoạn code này vào functions.php:

function getRefererPage( $form_tag ) {
    if ( $form_tag['name'] == 'referer-page' ) {
        $form_tag['values'][] = htmlspecialchars($_SERVER['HTTP_REFERER']);
    }
    return $form_tag;
}
if ( !is_admin() ) {
    add_filter( 'wpcf7_form_tag', 'getRefererPage' );
}

Bước 2: Trong trình soạn thảo form của CF7, thêm shortcode sau:

[hidden referer-page default:get]

Bước 3: Để nhận thông tin này qua email, hãy thêm tag [referer-page] vào phần nội dung email trong cài đặt của CF7.

3. Tự động lấy URL trang hiện tại

Trong nhiều trường hợp, bạn cần biết chính xác khách hàng đang điền form ở trang nào (đặc biệt khi dùng chung một form cho nhiều landing page). Bạn có thể sử dụng JavaScript để tự động điền URL vào một trường ẩn.

Bước 1: Thêm đoạn code này vào functions.php:

add_action( 'wp_footer', 'current_url_cf7' );
function current_url_cf7() {
?>
<script>
jQuery(document).ready(function($) {
    if(jQuery("#urlfield").length) {
        jQuery("#urlfield").val(window.location.href);
    }
});
</script>
<?php
}

Bước 2: Trong nội dung form, thêm trường ẩn với ID tương ứng:

[hidden url id:urlfield]

Lưu ý quan trọng khi tùy chỉnh

• Sử dụng Child Theme: Luôn thực hiện các thay đổi trong file functions.php của Child Theme. Điều này đảm bảo code của bạn không bị mất đi khi theme chính được cập nhật.
• Kiểm tra xung đột: Sau khi thêm code, hãy kiểm tra kỹ luồng hoạt động của form trên các trình duyệt khác nhau để đảm bảo tính ổn định.
• Tối ưu: Việc sử dụng code trực tiếp giúp website nhẹ hơn đáng kể so với việc cài đặt thêm các plugin trung gian.

Tại STAR WAR Digital Solutions, chúng tôi tin rằng sự tinh gọn trong kỹ thuật là chìa khóa để đạt được hiệu suất website tối ưu. Nếu bạn cần hỗ trợ triển khai các giải pháp tùy chỉnh chuyên sâu hơn cho hệ thống WordPress của doanh nghiệp, hãy liên hệ với đội ngũ kỹ thuật của chúng tôi để được tư vấn giải pháp phù hợp nhất.