Lưu ý trước khi sử dụng Contact Form 7
Khi sử dụng Contact Form 7 trong WordPress, dưới đây là một số lưu ý quan trọng bạn nên cân nhắc:
- Phiên bản WordPress và Contact Form 7 tương thích: Đảm bảo rằng bạn đang sử dụng phiên bản WordPress và Contact Form 7 tương thích với nhau. Cập nhật cả hai khi có phiên bản mới để tránh các vấn đề bảo mật và tương thích.
- Kiểm tra các trường hợp cần thiết: Xác định các trường dữ liệu mà bạn cần thu thập từ người dùng và tạo các trường tương ứng trong form. Đảm bảo rằng mọi trường được đặt tên rõ ràng và dễ hiểu.
- Xử lý dữ liệu đầu vào: Kiểm tra và xử lý dữ liệu đầu vào từ người dùng để đảm bảo tính hợp lệ và an toàn. Sử dụng các phương thức hợp lý như kiểm tra trên máy chủ (server-side validation) và kiểm tra trên máy khách (client-side validation).
- Tùy chỉnh giao diện: Sử dụng các lớp CSS được cung cấp bởi Contact Form 7 hoặc tạo các lớp tùy chỉnh để điều chỉnh giao diện của form theo ý muốn của bạn.
- Xác thực và phân quyền: Sử dụng các plugin bảo mật hoặc cài đặt cấu hình để xác thực và phân quyền dữ liệu nhập vào từ form. Điều này giúp ngăn chặn spam và bảo vệ dữ liệu người dùng.
- Kiểm tra email định kỳ: Thiết lập một quy trình để kiểm tra email từ Contact Form 7 định kỳ để đảm bảo rằng bạn không bỏ lỡ bất kỳ thông báo nào từ người dùng.
- Sao lưu cấu hình và dữ liệu: Thực hiện sao lưu định kỳ cho cấu hình và dữ liệu của Contact Form 7 để đảm bảo rằng bạn có thể khôi phục lại dữ liệu nếu cần.
- Tối ưu hóa hiệu suất: Kiểm tra và tối ưu hóa hiệu suất của form để đảm bảo rằng nó tải nhanh và hoạt động mượt mà trên mọi loại thiết bị.
- Hỗ trợ khách hàng: Cung cấp thông tin liên hệ dễ tìm và hỗ trợ cho người dùng nếu họ gặp vấn đề khi sử dụng form.
- Cập nhật và duy trì: Theo dõi cập nhật mới nhất từ Contact Form 7 và WordPress, và thực hiện bất kỳ bảo trì hoặc cập nhật nào cần thiết để giữ cho form hoạt động mượt mà và an toàn.
Một mẫu Contact form 7 hay sử dụng:
[text* your-name placeholder "Họ và tên"]
[tel* your-tel minlength:10 maxlength:10 placeholder "Số điện thoại"]
[submit class:wpcf7-form-control class:wpcf7-submit class:btn class:btn-default "Tư vấn ngay ►"]Mẫu Contact Form 7 ở trên là một biểu mẫu liên hệ trong WordPress, được tạo ra bằng cách sử dụng các shortcode của Contact Form 7. Dưới đây là giải thích về các shortcode trong mẫu này:
[text* your-name placeholder "Họ và tên"]: Đây là một trường văn bản (text field) yêu cầu người dùng nhập vào. Cần phải điền thông tin vào trường này để gửi form.your-namelà tên của trường, được sử dụng để xác định dữ liệu trong email hoặc tùy chỉnh.text*: Đây là loại trường dữ liệu. Trong trường hợp này, là trường dữ liệu văn bản bắt buộc (sao *).placeholder "Họ và tên": Đây là một dòng chứa văn bản xuất hiện trong ô nhập liệu như là một gợi ý cho người dùng.
[tel* your-tel minlength:10 maxlength:10 placeholder "Số điện thoại"]: Đây là một trường số điện thoại yêu cầu người dùng nhập vào. Cũng giống như trườngyour-name,your-tellà tên của trường dữ liệu.tel*: Đây là loại trường dữ liệu. Trong trường hợp này, là trường số điện thoại bắt buộc (sao *).minlength:10 maxlength:10: Xác định độ dài tối thiểu và tối đa của chuỗi số điện thoại là 10 ký tự.placeholder "Số điện thoại": Gợi ý cho người dùng nhập số điện thoại vào ô nhập liệu.
[submit class:wpcf7-form-control class:wpcf7-submit class:btn class:btn-default "Tư vấn ngay ►"]: Đây là nút gửi form. Khi người dùng nhấn vào nút này, dữ liệu trong form sẽ được gửi đi.submit: Loại của trường này, đây là nút gửi form.class:wpcf7-form-control class:wpcf7-submit class:btn class:btn-default: Các lớp CSS được áp dụng cho nút gửi form. Trong trường hợp này, nó có thể được sử dụng để tùy chỉnh giao diện của nút."Tư vấn ngay ►": Văn bản hiển thị trên nút gửi form. Trong trường hợp này, nút sẽ hiển thị “Tư vấn ngay ►”.
Hình ảnh hiển thị có thể như sau:
Code kiểm tra và xử lý dữ liệu được gửi từ form trong Contact Form 7
Chỉ cho phép nhập text:
add_filter( 'wpcf7_validate_text*', 'custom_text_validation_filter', 20, 2 ); function custom_text_validation_filter( $result, $tag ) { if ( 'your-text' == $tag->name ) { $re = '/^[^\p{N}][\p{L}]*/i'; if (!preg_match($re, $_POST['your-text'], $matches)) { $result->invalidate($tag, "This is not a valid text!" ); } } return $result; }
- Hàm
custom_text_validation_filterđược gọi khi dữ liệu được gửi từ trường văn bảnyour-text. - Biểu thức chính quy
$re = '/^[^\p{N}][\p{L}]*/i';đảm bảo rằng dữ liệu chỉ chứa các ký tự chữ cái (không phải số). - Nếu dữ liệu không khớp với biểu thức chính quy, hàm sẽ đánh dấu trường là không hợp lệ và trả về một thông báo lỗi.
Chỉ cho phép nhập đúng số điện thoại:
add_filter( 'wpcf7_validate_tel*', 'custom_tel_validation_filter', 20, 2 );
function custom_tel_validation_filter( $result, $tag ) {
if ( 'your-tel' == $tag->name ) {
$re = '/^0[0-9]{9}$/';
if (!preg_match($re, $_POST['your-tel'], $matches)) {
$result->invalidate($tag, "This is not a valid phone number!" );
}
}
return $result;
}- Hàm
custom_tel_validation_filterđược gọi khi dữ liệu được gửi từ trường số điện thoạiyour-tel. - Biểu thức chính quy
$re = '/^0[0-9]{9}$/';đảm bảo rằng dữ liệu là một số điện thoại bắt đầu bằng số 0 và có tổng cộng 10 chữ số. - Nếu dữ liệu không khớp với biểu thức chính quy, hàm sẽ đánh dấu trường là không hợp lệ và trả về một thông báo lỗi.
Lưu ý:
Hai code trên bạn có thể chèn vào file function.php và thay ô Văn bản cần kiểm tra và ô số điện thoại cần kiểm tra khớp nhau thì hàm mới được thực thi.
Chuyển trang sau khi gửi thông tin thành công
Bạn thêm code sau vào file footer.php của themes web
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://tinhay.top/gui-tin-thanh-cong';}, false );
</script>Đoạn mã JavaScript này được sử dụng trong kịch bản của Contact Form 7 trong WordPress. Khi một email được gửi thành công từ một form liên hệ được tạo bằng Contact Form 7, sự kiện wpcf7mailsent được kích hoạt. Đoạn mã JavaScript này lắng nghe sự kiện wpcf7mailsent, và khi sự kiện này xảy ra (nghĩa là khi email được gửi thành công), nó chuyển hướng người dùng đến một trang cụ thể, trong trường hợp này là 'https://tinhay.top/gui-tin-thanh-cong'.
Tóm lại, khi người dùng hoàn thành và gửi form liên hệ thành công, họ sẽ được chuyển hướng đến trang 'https://tinhay.top/gui-tin-thanh-cong'. Điều này thường được sử dụng để hiển thị một thông báo “Đặt hàng thành công hoặc Gửi thông tin thành công” hoặc một trang cảm ơn tương tự.