Tạo thêm trường trong Contact Form 7

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo thêm trường trong Contact Form 7

Tạo thêm trường form (shortcode tag)

Plugin cho phép bạn tạo thêm trường, ngoài các shortcode khai báo trường mặc định của contact form 7. Để tạo thêm trường form mới, bạn sử dụng wpcf7_add_shortcode . Xem tỉ dụ sau:

 wpcf7_add_shortcode('custom_date', 'wpcf7_custom_date_shortcode_handler', true); function wpcf7_custom_date_shortcode_handler($tag) { if (!is_array($tag)) return ''; $name = $tag['name']; if (empty($name)) return ''; $next_week = date('Y-m-d', time() + (60*60*24*7)); $html = '  '; return $html; }  

Chép đoạn code sau vào functions.php hay tạo vào plugin mới cho ctf7 shortcode tag của bạn. Đoạn code trên, mình tạo shortcode ‘custom_date’ sẽ sinh ra field thẻ ‘input type=”hidden”‘ có giá trị thể hiện ngày trong tuần. Và bạn điền tương ứng với tên tag này tại mục Form để bổ xung forms fields hiển thị trên website.

  

Your Name (required)
[ text* your-name ]

[ custom_date next_week ]

Subject
[ text your-subject ]

Your Message
[ textarea your-message ]

[ submit "Send" ]

Như bao template tag khác dùng trong việc thành lập nội dung form, hàm liên kết của hook tạo shortcode trả về chuỗi HTML cho trường form và trường form này sẽ hiển thị đúng vị trí bạn đã thiết lập hiển thị form như trên.
Nhập tên cho field mới, theo sau tên tag. Ở đây chúng ta có trường next_week bạn có thể xuất giá trị trường này trong Message Body, bằng phương pháp viết shortcode:

 [next_week]  

Bên cạnh đó, bạn còn cũng có thể có thể sử dụng tag như những shortcode bình thường, thí dụ truyền thuộc tính vào shortcode. Ví dụ tiếp theo đây, tôi tạo template tag ‘hw_text’.

 wpcf7_add_shortcode('hw_text', 'wpcf7_custom_text_shortcode_handler', true); function wpcf7_custom_text_shortcode_handler($tag) { if (!is_array($tag)) return ''; $atts=array(); if(is_array($tag['options']) && is_array($tag['values'])){ foreach($tag['options'] as $> $f) $atts[$f]=$tag['values'][$id]; } $name = $tag['name']; if (empty($name)) return ''; $html = '  '; return $html; }  

Mọi tin tức có trên shortcode hw_text đều nằm tại tham số hàm $tag . wpcf7 tách phần thuộc tính và giá trị của nó vào 2 địa thế lưu giữ khác nhau, khai báo thuộc tính giống như tham số command line. Tuy nhiên ngày nay mình thử nghiệm thì chỉ duy nhất sử dụng được một tham số truyền vào, như dưới đây:

 [hw_text name1 att1 "val1"]  

Kết quả:
Bạn cũng đều có thể sửa lại code plugin, mọi chuỗi các thuộc tính của template tag sẽ sử lý qua phương thức shortcode_parse_atts tại file contact-form-7/includes/shortcodes.php, hàm trả về mảng chứa tính chất giá trị của nó. VÍ dụ shortcode trên, biến truyền vào trong hàm ‘shortcode_parse_atts’ là

 name1 att1 "val1" 

trong đấy tên field ‘name1’ được lọc ra trong nội dung hàm.
Những nội dung shortcode của các form field này, được quản lý bởi lớp WPCF7_ShortcodeManager . Giá trị của option trên shortcode lấy bởi phương thức get_scanned_tags . Truy cập đối tượng instance của wpcf7 hiện tại trên website để lấy dữ liệu liên quan đến contact form đó.

 $shortcode=WPCF7_ShortcodeManager::get_instance(); var_dump($shortcode-> get_scanned_tags());  

Kết quả hàm trả về mảng bản kê options và giá trị của các options.

 [options] =>  Array ( [0] =>  att1 ) [raw_values] =>  Array ( [0] =>  val1 ) [values] =>  Array ( [0] =>  val1 )  

Ví dụ, bạn cũng đều có thể dẫn vào buổi lễ ‘wpcf7_before_send_mail’.

 function wpcf7_do_something ($WPCF7_ContactForm) { /* Use WPCF7_Submission object's get_posted_data() method to get it. */ $shortcode=WPCF7_ShortcodeManager::get_instance(); var_dump($shortcode-> get_scanned_tags()); } add_action("wpcf7_before_send_mail", "wpcf7_do_something");  

Sự kiện này thực thi trước khi người dùng nhấn nút submit form.
Class chính là WPCF7_ContactForm có instance được truyền vào hook trên, là lớp chứa dữ liệu kết nối tới các lớp con như WPCF7_ShortcodeManager.., ngoài cách lấy dữ liệu shortcode tags từ class WPCF7_ShortcodeManager, bạn còn có thể truy xuất dữ liệu này tại biến $WPCF7_ContactForm.

 function wpcf7_do_something ($WPCF7_ContactForm) { $atts=WPCF7_ContactForm-> form_scan_shortcode(); var_dump($atts); } add_action("wpcf7_before_send_mail", "wpcf7_do_something");  

Kết quả biến $atts có giá trị mảng giống như sau:

 Array ( .... [1] =>  Array ( [type] =>  hw_text [basetype] =>  hw_text [name] =>  name1 [options] =>  Array ( [0] =>  att1 ) [raw_values] =>  Array ( [0] =>  sdfsdf ) [values] =>  Array ( [0] =>  sdfsdf ) ......  

Tuy nhiên, cách sử dụng trên có thể không được phổ biến, sau một lúc tìm hiểu thì vấn để đã được giải quyết. Contact form 7 bổ trợ thêm tùy biến thuộc mọi tính chất cho trường tạo bởi shortcode tag.
Biến $tag lưu tất cả những tính chất có trên nội dung shortcode khái niệm tag, wpcf7 có class quản lý dữ liệu của shortcode tag, bằng phương pháp truyền tham số $tag vào lớp WPCF7_Shortcode thay vì sử dụng trực diện giá trị có trong biến mảng này.

 $tag = new WPCF7_Shortcode( $tag );  

Truy cập mảng $tag như bình thường nhưng ở dạng đối tượng, vì các giá trị có trong mảng $tag được chuyển thành các biến public trong lớp WPCF7_Shortcode. Ví dụ:

 $tag-> name; //tên field $tag-> type; //loại field $tag-> values; //nội dung field  

Khá nhiều hàm tiện ích khác như kiểm tra kiểu trường, bạn không cần code thêm phần sử lý nào, những phương thức của lớp quản lý shortcode tag này sẽ giúp bạn ít nhiều trong công đoạn tạo trường contact form 7.
Chẳng hạn chúng ta dựa vào ký tự * cuối shortcode tag để hiểu trường đó là bắt buộc, bạn chỉ cần gọi phương thức is_required() hàm trả sẽ về true/false.

 if ( $tag-> is_required() ){ ... }  

Ngoài ra, có một số hàm khác giúp bạn lấy nhanh thuộc tính của field cung cấp bởi shortcode tùy thuộc vào loại field mà bổ trợ các thuộc tính khác nhau. VD: trường textarea có attribute cols, rows, class tuy vậy bạn cũng luôn phải khai báo vào shortcode textarea như thế này. Chú ý: nếu chưa rõ thì nhờ trợ giúp tạo template tag trong bằng phương pháp bấm vào nút Generate Tag .

 [textarea textarea-819 10x5]  

Đoạn shortcode ở trên, cho biết cols=10 và rows=5. Để lấy giá trị những thuộc tính đặc biệt này bạn sử dụng hàm get_cols_option, get_rows_option.

 $tag-> get_cols_option( '40' ); $tag-> get_rows_option( '10' );  

Nếu không tồn tại thuộc tính cần lấy, chúng ta truyền thêm giá trị mặc định để thay thế hoặc bỏ qua:

 //maxlength $tag-> get_maxlength_option(); //lấy thuộc tính id của field: vd: [ text id:name1 ] $tag-> get_id_option(); //return "name1"  

hay bổ xung như xác định class bởi shortcode tag.

 //lấy tính chất class của field, thông qua shortcode tag. Ví dụ: [ text class:class1" ] $tag-> get_class_option('class2 class3');  

Hàm trên trả về nội dung option “class” có thiết lập trên shortcode, field input text tạo nên có: > Như vậy để tạo tính chất mới bất kỳ cho thẻ form, bạn sử dụng cú pháp option: attribute:value . vd: giả sử chúng bạn có wpcf7 shortcode tag ‘mycustom_tag’.

 [mycustom_tag data-image:button.jpg]  

Chú ý: giá trị option viết trên shortcode không bao bởi ký tự ” & ‘ .Kết quả form field có thêm thuộc tính data-image=”button.js” .
Tuy nhiên: các template tag mặc định sử dụng trong wpcf7 sẽ giới hạn, không hiển thị tính chất ngoài ‘type’, ‘name’, ‘value’. Khuyến kích bạn có thể sửa lại code plugin để tùy biến nhiều hơn, hoặc bằng cách tự tạo riêng của mình shortcode tag để sử dụng mục tiêu cho website của mình. Nhưng điều này không ảnh hưởng đến việc lấy dữ liệu của shortcode tag, nhớ rằng dữ liệu trường lưu trên shortcode tag.

Bạn cũng cũng đều có thể lấy mọi tính chất khác thiết lập cho tag với hàm $tag-> get_option . Ví dụ sau, lấy tính chất ‘tabindex’ đòi hỏi có giá trị số nguyên.

 //[ text tabindex:10 ] $tag-> get_option( 'tabindex', 'int', true ); //trả về: 10  

Ví dụ khác, trả về mảng có mức giá trị nằm ở thành phần đầu tiên.

 //[ text data-template:template.html ] $tag-> get_option('data-template');  

Ví dụ Kết quả là:

 array( [0] =>  'your value' )  

Nếu không biết rõ kiểu giá trị option, và muốn lấy giá trị của nó thì thiết lập tham số thứ hai false hoặc để trống:

 echo $tag-> get_option('att1','',true);  

Ngoài ra, hàm has_option cấp phép bạn kiểm tra tính chất có tại không?

 //[ text txt1 ] echo $tag-> has_option( 'readonly' ); //return false  

Nội dung Classes có sẵn cho những kiểu field mặc định với WPCF7
Lấy classes cho từng form fields bởi hàm wpcf7_form_controls_class .

 $class = wpcf7_form_controls_class( $tag-> type ); //ie: textarea //textarea field return: wpcf7-form-control wpcf7-textarea  

Nếu submit form gặp lỗi validation bạn cũng đều có thể lấy giá trị field form trước đấy bởi biến $_POST.

 function wpcf7_custom_text_shortcode_handler($tag) { if (!is_array($tag)) return ''; ... if ( wpcf7_is_posted() && isset( $_POST[$tag-> name] ) ) $value = wp_unslash( $_POST[$tag-> name] ); ... }  

Truy cập tính chất field trong hàm buổi lễ submit form
Trong hàm sử lý dữ liệu submit form, chứa mọi thứ các field dưới dạng mảng tham số có truyền vào hàm. Bạn lấy từng nội dung field và quản lý qua lớp WPCF7_Shortcode . Ví dụ, mình lấy field trước mắt trong form, rất dễ dàng như sau:

 function wpcf7_do_something ($WPCF7_ContactForm) { $atts=$WPCF7_ContactForm-> form_scan_shortcode(); $tag = new WPCF7_Shortcode( $atts[0] ); echo $tag-> get_option('attr1','',true); } add_action("wpcf7_before_send_mail", "wpcf7_do_something");  

Lưu ý: các thuộc tính này lấy từ nội dung shortcode mà bạn nhập form template trong phần sửa contact form 7, không yêu cầu nhất thiết các thuộc tính của field thể hiển trên đầu ra html. VD: trường mặc định tạo bởi wpcf7 như text,textarea.. chỉ hỗ trợ một số thuộc tính cơ bản.
Nếu muốn tùy biến các tính chất mở rộng cho trường form để tạo nên thể hiện trên thẻ html thì bạn cũng có thể tạo field mới hoặc sửa lại các field tạo trường sẵn có trong wpcf7 tại thư mục /modules/.
Ví dụ: ta có shortcode tag: [mytext txt1 att1:val1 att2:val2]
Lấy thuộc tính trên shortcode và in ra input tag như thế này:

    

Thêm menu hỗ trợ tạo shortcode tag

Sau khi tạo trường shortcode tag sử dụng trong contact form 7, bạn cũng có thể thêm phần trợ giúp tạo shortcode trong danh sách Generate Tag. Nó thực thụ hữu ích, giúp người sử dụng sinh code shortcode cho từng loại field họ muốn chèn vào form.

Để tạo menu mới bạn sử dụng hàm wpcf7_add_tag_generator . Cú pháp:

 wpcf7_add_tag_generator( $name, $title, $elm_id, $callback, $options = array() )  

Ví dụ: tạo field textarea từ file contact-form-7/modules/textarea.php .

     
 

id ( )
class ( )
cols ( )
rows ( )
maxlength ( )
( )

 


Chú ý: tham số $elm_>

     
..

wpcf7 căn cứ vào ID để tự động ra đời tên (thuộc tính ‘name’) cho field.
generate-tag-wpcf7

Các trường khác thành lập option cho field, sử dụng tên option đặc biệt được quy ước trong contact form 7 như: id, class,cols, rows, maxlength, values, placeholder…
Ngoài ra bạn được phép thêm các option ngoài, không thuộc option đặc biệt trên, wpfc7 sẽ tạo thuộc tính trên shortcode như đã giải thích chi tiết ở phần đầu.

     
.. ..

Chú ý: Generate Tag hoạt động bằng javascript, giá trị nhập vào các trường form sẽ tự động thêm vô kết quả shortcode sinh ra. Các field được quy chế bằng tên class đại diện cho vai trò của nó. Ví dụ :
– field option có > – trường option số bạn thêm > ..
– trường hiển thị kết quả shortcode tag sinh ra, hiện trên form field có . Với shortcode dành cho mail template là . Bạn tự tìm hiểu thêm, mình chỉ nói một vài ý cơ bản.

Bạn cũng có thể tùy biến thêm class, tùy ý.
Chúc bạn thành công!

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Tạo thêm trường trong Contact Form 7 được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang