Tùy Biến Contact Form 7

      26

Hi! Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy biến hiển thị thông báo validation cho trường contact form 7.

*

Sửa nội dung và tùy biến validation

Sửa chuỗi hiển tin nhắn lỗi, ví dụ thông báo mặc định cho “require field” là “Please fill the required field.”. Để thay đổi tin nhắn này bạn truy cập trang sửa form Contact -> Contact Forms và sửa lại văn bản trong mục Messages.

Bạn đang xem: Tùy biến contact form 7

Bên cạnh đó, bạn có thể thay đổi hiển thị động mọi chuỗi hiển thị có trong mục Messages của cấu hình form, không cần sửa trực tiếp file plugin ‘text.php’ mà sử dụng hook được định nghĩa trong file này. Bạn hoàn toàn tùy biến ‘validation’ dễ dàng bằng cách thêm filter wpcf7_validate_text trong theme functions.php hoặc viết vào plugin mới của bạn.

Chú ý Bạn có thể sửa lại chuỗi hiển thị validation cho trường vào giá trị ‘reason’ như sau: $result<"reason"><$name>="validation modified...";

Mặc định chuỗi validation lấy trong phần messages settings bởi hàm wpcf7_get_message. Xác định chuỗi lỗi với các loại message phù hợp cần hiển thị. Ví dụ required field, chúng ta lấy message ‘invalid_required’.

Xem thêm: Nguyên Nhân Và Cách Khắc Phục Lỗi Máy In Offline Chính Xác, Hiệu Quả Nhất

if ( "textarea*" == $type ) {if ( "" == $value ) {$result<"valid"> = false;$result<"reason"><$name> = wpcf7_get_message( "invalid_required" );}}Tham số $result được kế thừa vào hook wpcf7_before_send_mail trước khi trả về kết quả json. Bạn có thể sử dụng tham số này để tùy biến thêm.

Mỗi field shortcode sử dụng hook validation riêng, tên hook tương ứng với loại field theo sau bởi tên shortcode. vd: < select menu-891 “1” “2” “3” > có validation hook là wpcf7_validate_select & wpcf7_validate_select* dành cho trường require < select* menu-891 “1” “2” “3” > Do đó mỗi trường shortcode sẽ có 2 loại hook tương ứng , bạn nên trỏ 2 hook này vào một hàm kiểm tra validation của trường.

Ví dụ sau đây sửa lại validation cho email field, bắt buộc người dùng phải sử dụng email của công ty, không cho phép dùng free mail như: gmail, yahoo,…Sửa lại đoạn code dưới đây theo ý bạn.

// Add custom validation for CF7 form fieldsfunction is_company_email($email){ // Check against list of common public email providers & return true if the email provided *doesn"t* match one of themif(preg_match("/
me.com/i", $email)){return false; // It"s a publicly available email address}else{return true; // It"s probably a company email address}}function custom_email_validation_filter($result,$tag){$type = $tag<"type">;$name = $tag<"name">;if($name == "company-email"){ // Only apply to fields with the form field name of "company-email"$the_value = $_POST<$name>;if(!is_company_email($the_value)){ // Isn"t a company email address (it matched the list of free email providers)$result<"valid"> = false;$result<"reason"><$name> = "You need to provide an email address that isn\"t hosted by a free provider.Please contact us directly if this isn\"t possible.";}}return $result;}add_filter("wpcf7_validate_email","custom_email_validation_filter", 10, 2); // Email fieldadd_filter("wpcf7_validate_email*", "custom_email_validation_filter", 10, 2); // Req. Email field

Hiển thị Static hoặc Floating-tip

wpcf7 có 2 lựa chọn cho tin nhắn lỗi validation: static và floating-tip. Static hiện tại là lựa chọn mặc định. Float-tip sử dụng css position:absolute; hiển thị nổi như thế này.
*


Để áp dụng kiểu field với thông validation dạng ‘floating-tip’ và có thể sử dụng cho toàn fields trong form. Nguyên tắc cơ bản khi form field có thẻ bao chứa class ‘use-floating-validation-tip’ sẽ hiển thị tin nhắn lỗi (validation) float-tip khi trường có giá trị sai hoặc các trường yêu cầu (require *). Ví dụ:

< text* your-name >Nếu bạn muốn áp dụng float-tip style cho tất cả fields trong form, tức là thêm class="use-floating-validation-tip" vào thẻ form. Trong bài tạo form liên hệ trong wordpress với WPCF7 mình có hướng dẫn cách thêm bạn chỉ việc thêm chuỗi này vào thuộc tính html_class cho shortcode hiển thị form contact-form-7. Ví dụ:

< contact-form-7 id="1234" title="Contact form 1" html_class="use-floating-validation-tip" >Tham khảo: Plugin hiển thị validation Jquery Validation For Contact Form 7

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook