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 ví 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 = '<input type="hidden" name="' . $name . '" value="' . $next_week . '" />';
    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.

<p>Your Name (required)<br />
    [ text* your-name ] </p>

[ custom_date next_week ]

<p>Subject<br />
    [ text your-subject ] </p>

<p>Your Message<br />
    [ textarea your-message ] </p>

<p>[ submit "Send" ]</p>

Như bao template tag khác dùng trong việc xây dựng 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 cách viết shortcode:

[next_week]

Bên cạnh đó, bạn còn có thể sử dụng tag như những shortcode bình thường, ví 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 $id=>$f) $atts[$f]=$tag['values'][$id];
	}
    $name = $tag['name'];
    if (empty($name)) return '';

    $html = '<input type="text" name="' . $name . '" value="" />';
    return $html;
}

Mọi thông tin 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 vị trí lưu trữ khác nhau, khai báo thuộc tính giống như tham số command line. Tuy nhiên hiện tại 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ó 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 thuộc tính 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 đó 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 danh sách 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ó thể đưa vào sự kiện ‘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 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 hỗ trợ thêm tùy biến với mọi thuộc tính cho trường tạo bởi shortcode tag.
Biến $tag lưu tất cả các thuộc tính có trên nội dung shortcode định nghĩa tag, wpcf7 có class quản lý dữ liệu của shortcode tag, bằng cách truyền tham số $tag vào lớp WPCF7_Shortcode thay vì sử dụng trực tiếp 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 quá trình tạo trường contact form 7.
Chẳng hạn chúng ta dựa vào ký tự * cuối shortcode tag để biết 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à hỗ trợ các thuộc tính khác nhau. VD: trường textarea có attribute cols, rows, class tuy nhiên bạn cũng cần 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 cách nhấn 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 thuộc tính 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 ra có: class=”class1 class2 class3″
Như vậy để tạo thuộc tính 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ị thuộc tính 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 cho mình shortcode tag để sử dụng mục đích 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ó thể lấy mọi thuộc tính khác thiết lập cho tag với hàm $tag->get_option. Ví dụ sau, lấy thuộc tính ‘tabindex’ yêu cầu 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ó giá trị nằm ở phần tử đầ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 cho phép bạn kiểm tra thuộc tính có tại không?

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

Nội dung Classes có sẵn cho các 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ó thể lấy giá trị field form trước đó 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 thuộc tính field trong hàm sự kiện submit form
Trong hàm sử lý dữ liệu submit form, chứa tất cả 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 đầu tiên trong form, rất đơn giản 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 thuộc tính mở rộng cho trường form để có thể hiển thị trên thẻ html thì bạn 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:

<input type="text" att1="val1" att2="val2"/>

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ó thể thêm phần trợ giúp tạo shortcode trong danh sách Generate Tag. Nó thực sự hữu ích, giúp người 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.

<?php
add_action( 'admin_init', 'wpcf7_add_tag_generator_textarea', 20 );

function wpcf7_add_tag_generator_textarea() {
	if ( ! function_exists( 'wpcf7_add_tag_generator' ) )
		return;

	wpcf7_add_tag_generator( 'textarea', __( 'Text area', 'contact-form-7' ),
		'wpcf7-tg-pane-textarea', 'wpcf7_tg_pane_textarea' );
}

function wpcf7_tg_pane_textarea( &$contact_form ) {
?>
<div id="wpcf7-tg-pane-textarea" class="hidden">
<form action="">
<table>
<tr><td><input type="checkbox" name="required" />&nbsp;<?php echo esc_html( __( 'Required field?', 'contact-form-7' ) ); ?></td></tr>
<tr><td><?php echo esc_html( __( 'Name', 'contact-form-7' ) ); ?><br /><input type="text" name="name" class="tg-name oneline" /></td><td></td></tr>
</table>

<table>
<tr>
<td><code>id</code> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br />
<input type="text" name="id" class="idvalue oneline option" /></td>

<td><code>class</code> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br />
<input type="text" name="class" class="classvalue oneline option" /></td>
</tr>

<tr>
<td><code>cols</code> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br />
<input type="number" name="cols" class="numeric oneline option" min="1" /></td>

<td><code>rows</code> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br />
<input type="number" name="rows" class="numeric oneline option" min="1" /></td>
</tr>

<tr>
<td><code>maxlength</code> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br />
<input type="number" name="maxlength" class="numeric oneline option" min="1" /></td>
</tr>

<tr>
<td><?php echo esc_html( __( 'Default value', 'contact-form-7' ) ); ?> (<?php echo esc_html( __( 'optional', 'contact-form-7' ) ); ?>)<br /><input type="text" name="values" class="oneline" /></td>

<td>
<br /><input type="checkbox" name="placeholder" class="option" />&nbsp;<?php echo esc_html( __( 'Use this text as placeholder?', 'contact-form-7' ) ); ?>
</td>
</tr>
</table>

<div class="tg-tag"><?php echo esc_html( __( "Copy this code and paste it into the form left.", 'contact-form-7' ) ); ?><br /><input type="text" name="textarea" class="tag wp-ui-text-highlight code" readonly="readonly" onfocus="this.select()" /></div>

<div class="tg-mail-tag"><?php echo esc_html( __( "And, put this code into the Mail fields below.", 'contact-form-7' ) ); ?><br /><input type="text" class="mail-tag wp-ui-text-highlight code" readonly="readonly" onfocus="this.select()" /></div>
</form>
</div>
<?php
}

?>

Chú ý: tham số $elm_id=” wpcf7-tg-pane-textarea” trùng với tên id của thẻ div trong hàm callback hiển thị nội dung khi chọn vào Generate Tag.

<?php
wpcf7_add_tag_generator( 'textarea', __( 'Text area', 'contact-form-7' ),
	'wpcf7-tg-pane-textarea', 'wpcf7_tg_pane_textarea' );

function wpcf7_tg_pane_textarea( &$contact_form ) {
?>
<div id="wpcf7-tg-pane-textarea" class="hidden">
..
</div>
<?php
}
?>

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

Các trường khác xây dựng 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.

<?php
/*kết quả: [custom-wpcf7-shortcode-tag att1:"xxxx"]*/
wpcf7_add_tag_generator( 'custom-wpcf7-shortcode-tag', __( 'Hoangweb', 'contact-form-7' ),
	'wpcf7-tg-pane-tag1', 'wpcf7_tg_pane_textarea' );

function wpcf7_tg_pane_textarea( &$contact_form ) {
?>
<div id="wpcf7-tg-pane-tag1" class="hidden">
..
<input type="text" name="att1" class="option"/>
..
</div>
<?php
}
?>

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ào kết quả shortcode sinh ra. Các field được quy định bằng tên class đại diện cho vai trò của nó. Ví dụ :
– field option có class=”option”.
– trường option số bạn thêm class=”numeric option”
..
– trường hiển thị kết quả shortcode tag sinh ra, hiển thị trên form field có class="tag". Với shortcode dành cho mail template là class="mail-tag". 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!

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook