Tạo trang liên hệ cho WordPress với Contact Form 7

Một trang liên hệ đóng vai trò quan trọng trong website, là cầu nối giữa khách truy cập và chủ thể sở hữu. Bài này sẽ hướng dẫn các bạn tạo một trang liên hệ đơn giản với mẫu(form) gởi email bằng plugin Contact Form 7 và giải quyết các vấn đề trong quá trình cài đặt, sử dụng plugin và tích hợp reCAPTCHA.

Cài đặt plugin Contact Form 7

Plugin Contact Form 7 by Takayuki Miyoshi là một plugin miễn phí giúp tạo form liên hệ, thu tập feedback của khách hàng. Các bạn tiến hành cài đặt plugin bình thường từ nguồn wordpress.org.

Hướng dẫn tạo form liên hệ với Contact Form 7

Để tạo form mới, các bạn vào menu Form liên hệ > Tạo form mới (hoặc Form > Add New)

Sau khi click tạo form mới, các bạn sẽ có một form như hình dưới:

Bên trên khung soạn thảo bạn sẽ thấy nhiều Tag: email, URL, file,…, ở đây bạn sẽ chọn kiểu field mà Plugin này hỗ trợ tạo. Khi cần dùng tag nào chỉ việc click chọn tag đó, khung cấu hình sẽ hiển thị để bạn thiết lập.

Sau khi cấu hình xong, các bạn click vào nút Chèn vào Form để thêm trường vừa tạo.

Hiện tại nó có một số field như sau:

• Email: Trường đặc biệt dùng để khách nhập email của họ vào, lúc đó các hệ thống email sẽ hiểu rằng đây là email của người liên hệ để bạn ấn reply nhanh chóng.
• Date: Trường riêng biệt để chọn ngày tháng, có tích hợp thêm tính năng chọn theo lịch.
• URL: Trường dùng để nhập liên kết.
• Telephone Number: Một trường đặc biệt để nhập số điện thoại.
• Checkboxes: Trường chọn giá trị định sẵn thông qua việc đánh dấu.

Ngoài ra còn nhiều trường khác nữa, chi tiết các bạn có thể xem tài liệu tại https://contactform7.com/tag-syntax/

Chú ý là nếu các bạn cấu hình một form có tính năng gởi email thì trong tab Cấu hình Mail, các bạn cần phải tự nhập tên trường tương ứng mà mình vừa tạo vào đây để nội dung email gởi về chứa đầy đủ thông tin bạn cần.

Sau khi cấu hình xong, các bạn nhớ nhấn Lưu để lưu lại form template.

Chèn form liên hệ vào Bài viết/Trang

Cách sử dụng form cực kỳ đơn giản, sau khi các bạn tiến hành Lưu form, chỉ cần copy đoạn shortcode ở ô màu xanh bên trên. Sau đó chèn shortcode này vào Bài viết, Trang hay bất kỳ chỗ nào bạn muốn.

Và tận hưởng thành quả.

---

Tích hợp reCAPTCHA chống bot spam

Sau khi tạo form liên hệ thành công, để phòng trường hợp bị bot tấn công, tiến hành gởi mail hàng loạt gây hao tổn tài nguyên. Tùy nhu cầu mà bạn có thể cân nhắc tích hợp reCAPTCHA của Google để chống bot spam.

Hướng dẫn tích hợp reCAPTCHA

Đầu tiên, các bạn cần đăng ký một tài khoản reCAPTCHA tại https://www.google.com/recaptcha/admin

Các bạn tiếng hành đăng nhập bằng tài khoản Google. Sau đó nhập thông tin như bên dưới:

Phần Label, các bạn nhập tên gợi nhớ để tiện quản lý. Sau đó tích chọn phiên bản reCAPTCHA muốn dùng, ở đây mình khuyến khích sử dụng reCAPTCHA v3.

Ở phần Domains, các bạn khai báo tên miền sử dụng. Lưu ý là nếu các bạn có nhiều subdomain như: lienhe.vietrick.com, huongdan.vietrick.com,… thì chỉ cần nhập domain chính vietrick.com là đủ.

Sau đó nhớ tích chọn vào ô: Accept the reCAPTCHA Terms of Service. Cuối cùng nhấn SUBMIT để hoàn tất đăng ký.

Sau khi đăng ký thành công, trong phần quản lý captcha, các bạn sẽ có được 2 thông số quan trọng:

• Site Key
• Secret Key

Tiếp đến các bạn quay trở lại trang admin của wordpress, vào menu Form liên hệ > Tích hợp. Rồi nhấn vào nút Thiết lập tích hợp.

Tiếp đến, các bạn dán Site Key và Secret Key đăng ký được ở trên vào ô tương ứng rồi lưu lại. Tích hợp thành công sẽ hiển thị như bên dưới.

Lúc này quay trở lại trang liên hệ bạn vừa tạo. Ở góc phải màn hình sẽ có huy hiệu của reCAPTCHA. Đến đây thì chúc mừng bạn, việc tích hợp đã hoàn tất rồi.

Chỉ hiện thị reCAPTCHA khi dùng shortcode

Mặc định, reCAPTCHA sẽ hiển thị một huy hiệu nhỏ ở góc phải màn hình. Ở các bản Contact form 7 mới cập nhật gần đây. Sau khi bạn tích hợp reCAPTCHA v3 thì huy hiệu này sẽ xuất hiện ở mọi nơi: Trang chủ, bài viết, trang,… Bất kể là bạn có đang sử dụng Contact form 7 hay không. Hy vọng vấn đề này sẽ được tác giả giải quyết trong các bản cập nhật tới.

Sau khi tìm hiểu và nghiên cứu, mình có tìm ra giải pháp hữu hiệu giải quyết vấn đề này:

• Đảm bảo Contact Form và reCAPTCHA hoạt động bình thường
• Không đơn thuần là ẩn huy hiệu này đi bằng CSS: display:none
• Chỉ hiển thị huy hiệu khi nào sử dụng shortcode tại bài viết/trang
• Mỗi khi update plugin Contact Form 7 thì phải thực hiện lại

Để thực hiện, các bạn tiến hành mở và chỉnh sửa tệp functions.php ở đường dẫn: wp-content/plugins/contact-form-7/includes/functions.php. Các bạn chèn đoạn mã sau vào dòng dưới cùng của tệp functions.php:

function my_register_cf7_js() {
    // Dequeue cf7 and recaptcha scripts, preventing them from loading everywhere
    add_filter( ‘wpcf7_load_js’, ‘__return_false’ ); // Might as well use their filter
    wp_dequeue_script( ‘google-recaptcha’ );

    // If current post has cf7 shortcode, enqueue!
    global $post;
    if ( isset( $post->post_content ) AND has_shortcode( $post->post_content, ‘contact-form-7’ ) ) {
        if ( function_exists( ‘wpcf7_enqueue_scripts’ ) ) {
            wpcf7_enqueue_scripts();
            wp_enqueue_script( ‘google-recaptcha’ );
        }
    }
}

add_action( ‘wp_enqueue_scripts’, ‘my_register_cf7_js’, 20, 0 );

Sau khi lưu tệp, các bạn có thể kiếm tra lại. reCAPTCHA giờ chỉ được phép chạy khi nào ta dùng shortcode Contact Form 7.

Nếu các bạn chỉ dùng plugin Contact Form 7 duy nhất trên trang liên hệ thì có thể sử dụng đoạn code sau đây để đảm bảo hiệu quả tuyệt đối:

// Deregister Contact Form 7 JavaScript & Css, reCAPTCHA script files on all pages without a form
function contactform2_deregister_javascript_css() {
    if ( ! is_page( ‘contact’ ) ) {
        wp_deregister_script( ‘contact-form-7’ );
		wp_deregister_style( ‘contact-form-7’ );
		
		wp_deregister_script( ‘google-recaptcha’ );
	}
	
}
add_action( ‘wp_enqueue_scripts’, ‘contactform2_deregister_javascript_css’, 100 );

Trong đó, các bạn thay thế contact bằng slug địa chỉ trang liên hệ của bạn.

Thắc mắc

Nếu các bạn có ý kiến, vui lòng để lại bình luận ở bên dưới nhé.