Hướng dẫn sử dụng Additional settings – Tuỳ chọn khác trong Contact Form 7

Để tổng hợp ra một bài viết đối với cá nhân tôi không phải là quá khó. Cái trăn trở chính là sự sắp xếp trình tự các bước, cũng như giải thích các thuật ngữ chuyên môn để các bạn, dù mới học WordPress cũng làm theo được trong mỗi bài viết. Vì vậy nếu bạn là một chuyên gia WordPress cũng đừng chê bài viết dài dòng, vì ở đâu đó còn rất nhiều bạn đang muốn tiếp cận WP phải không.

1. Additional settings Contact Form 7 là gì?

Nói đơn giản là mỗi một Form liên hệ, Contact Form 7 cho phép chúng ta thêm mới những dòng tùy chỉnh, với mỗi một code snippets sẽ có một chức năng cụ thể (bạn có thể xem giải thích tại bước 3).

2. Khai báo Additional settings ở đâu?

Click vào Danh sách Form menu

Sau đó chọn 1 form bất kì. Tuỳ chọn khác sẽ có tác dụng riêng cho mỗi form (Additional Settings tab)

Dưới đây là danh sách các Additional settings rất hữu ích lưu lại biết đâu bạn sẽ cần dùng đến.

subscribers_only: true
demo_mode: on
skip_mail: on
acceptance_as_validation: on
do_not_store: true

Danh sách Additional settings bên dưới đây đã bị khai tử.

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

Nếu bạn đã và đang sử dụng 2 tùy chọn trên, dễ dàng nhận thấy thông báo “Các cài đặt đã lỗi thời.” từ Contact Form 7 như sau:

Cách giải quyết lỗi Deprecated settings như thế nào?

Trước tiên bạn nên loại bỏ các tùy biến ấy đi.

Sau đó thay thế bằng các sự kiện DOM của javascript hay còn gọi là DOM events. Giả sử bạn có dòng tùy chọn là on_sent_ok: “alert(‘sent ok’);” sau khi Form được gửi thành công. Bạn chỉnh sửa lại như sau, nhớ thêm đoạn code sau vào functions.php nhé.

<?php
add_action( 'wp_footer', 'wpshare247_cf7_wp_footer' );
function wpshare247_cf7_wp_footer() {
?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            alert('sent ok');
        }, false );
    </script>
<?php
}

3. Ý nghĩa và cách sử dụng Tuỳ chọn khác của Contact Form 7

Mặc định contact form 7 có sẵn 7 tùy chỉnh như sau. Giờ chúng ta sẽ tìm hiểu ý nghĩa lần lược từng thông số nhé.

3.1 Subscribers-only mode

subscribe_only: true

Đơn giản là chỉ những thành viên đã đăng nhập mới được quyền gửi thông tin qua From đang được cấu hình thông số subscribe_only.

3.2 Demo mode

demo_mode: on

Nếu khai báo thông số này giúp chúng ta biết tình trạng hoạt động của Form đã sằn sàng hay chưa. Nó sẽ bỏ qua tất cả các bước như Gửi nhận email …chỉ hiển thị tình trạng thành công hay thất bại mà thôi.

3.3 Skipping mail

skip_mail: on

Form hoạt động bình thường duy nhất chỉ là bỏ qua bước gửi nhận email mà thôi.

3.4 Acceptance as validation

acceptance_as_validation: on

Trường hợp này ít dùng đến, có thể giải thích như sau: Dùng để kiểm tra các checkbox khác (gọi là acceptance checkbox) nó không phải là field checkbox mặc định Contact Form 7 đã cung cấp cho chúng ta. Nói chính xác hơn nó là các check box điều khoản chấp nhận trước khi thực hiện gửi yêu cầu Form.

Khi acceptance_as_validation là on nó sẽ kiểm tra nếu người dùng chưa check vào thì không thực hiện được gửi Form.

3.5 Flamingo settings

Flamingo là plugin cùng công ty với Contact Form 7, plugin này giúp chúng ta lưu trữ nội dung và email đã được gửi đến mà trước đó Contact form 7 không lưu trữ. Flamingo settings sẽ hoạt động nếu bạn cài plugin này vào.

Một số tùy chỉnh của Flamingo  được Contact form 7 chấp nhận như sau:

flamingo_email: "[the-email-field]"
flamingo_name: "[the-name-field]"
flamingo_subject: "[the-subject-field]"

Bạn có thể tải về để lưu trữ nội dung khách hàng liên hệ với Plugin Flamingo nhé.

3.6 Suppressing message storage

do_not_store: true

Cài đặt này thông báo cho các Module lưu trữ tin nhắn, chẳng hạn như Flamingo, không lưu tin nhắn qua biểu mẫu liên hệ này.

3.7 JavaScript code

Đây là các sự kiện Event bằng code Javascript mà contact form 7 cung cấp cho chúng ta. Chúng rất hữu ít khi chúng ta cần kiểm tra thêm một vấn đề gì đó cho khách hàng. Ví dụ chuyển hướng sang trang Thank You Page sau khi gửi nhận email thành công.

<?php
add_action( 'wp_footer', 'wpshare247_cf7_wp_footer' );
function wpshare247_cf7_wp_footer() {
?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7mailsent', function( event ) {
           location = 'https://domain.com/thank-you-page'; // thay đổi bằng đường dẫn trang cảm ơn của bạn
        }, false );
    </script>
<?php
}

Dưới đây là danh sách các DOM events thường dùng, bạn lưu lại để tham khảo nhé:

• wpcf7invalid: Kiểm tra các field chưa có dữ liệu hợp lệ.
• wpcf7spam: Sự kiện hoàn thành nhưng chưa gửi mail được do phát hiện SPAM
• wpcf7mailsent: Sự kiện hoàn thành và đã gửi mail thành công.
• wpcf7mailfailed: Sự kiện sau khi form Ajax hoàn thành nhưng không gửi được mail.
• wpcf7submit: Sự kiện sau khi quá trình gửi nhận email hoàn thành, có thể là thành công hoặc thất bại.

Sau đây là một số đoạn code Javascript hữu ích có thể bạn đang cần của Contact Form 7

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

document.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Đã submit!" );
}, false );

document.addEventListener( 'wpcf7submit', function( event ) {
  var inputs = event.detail.inputs;
 
  for ( var i = 0; i < inputs.length; i++ ) {
    if ( 'your-name' == inputs[i].name ) {
      alert( inputs[i].value );
      break;
    }
  }
}, false );

document.addEventListener( 'wpcf7submit', function( event ) {
  if ( '123' == event.detail.contactFormId ) {
    alert( "contact form ID là 123." );
  }
}, false );

Với những chia sẻ về Additional settings hi vọng sẽ giúp các bạn nhiều hơn trong việc sử dụng Contact Form 7 trong WordPress nhé.