Sử lý dữ liệu trong contact form 7

Trong quá trình tạo form trong wordpress mình thấy ưng ý nhất là Contact form 7, plugin cung cấp giải pháp xây dựng form liên hệ và những form khác hoàn hảo. Tại blog này mình cũng có bài tutorial về cách tạo form sử dụng Fast Secure Contact Form để lưu thông tin khách hàng.

Các bạn có thể cài đặt một trong 2 plugin hoặc cả 2 nếu muốn. Bài hôm nay bạn sẽ học thêm cách tùy biến contact form 7 sử dụng API và lấy dữ liệu trên form.

WPCF7 mặc định gửi dữ liệu trên form thông qua ajax, khi người dùng nhấn nút submit form ảnh loading hiển thị cạnh nút submit giống như thế này.

nếu trang chứa form load lại sau khi nhấn nút submit form có nghĩa jquery sử dụng trong website đã bị xung đột.

Form sau khi hoàn thành việc gửi dữ liệu, sẽ gửi một email theo cấu hình bạn thiết lập form ở admin. Trường hợp dữ liệu trên form thỏa mãn và bạn đã cấu hình gửi mail trong wordpress email sẽ gửi nội dung trên form cho người nhận thiết lập trong admin của form đó. Nhưng nếu bị lỗi form, kết quả ajax trả về chuỗi json thông báo nguyên nhân lỗi, có thể bạn chưa nhập đúng email hoặc wordpress cấu gửi mail sai.

Mở DOM Element trên chrome sẽ có kết quả sử lý ajax:


Như bạn thấy ở kết quả, có lỗi thông báo hiển ra, vì kết quả json của ajax sử lý dữ liệu trên form không được gửi email đi, do chưa cấu hình email trong wordpress đúng.
Xem hướng dẫn gửi email bằng SMTP riêng tại đây.

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

Xem chi tiết cách tùy biến thêm trường form cho contact form 7.

Tùy biến giá trị Text field với Contact Form 7 Dynamic Text Extension

Cũng giống ý tưởng sử dụng shortcode truy xuất dữ liệu posts trong wordpress, bạn có thể tạo text field lấy giá trị từ tham số URL hoặc từ nội dung wordpress thông qua sử dụng shortcode trong nội dung trường Contact form 7, xem chi tiết tại đây.

Một số hàm tiện tích

– Kiểm tra phiên bản wpcf7 với hằng:
WPCF7_VERSION

– Lấy Id của form.

function wpcf7_do_something ($WPCF7_ContactForm) {
	/* Use WPCF7_Submission object's get_posted_data() method to get it. */
	/**
	* lấy id của form
	*/
	$form_id=$WPCF7_ContactForm->id();		//ie: 20
	//note: đối với một số phiên bản cũ, không còn được sử dụng. VD:
	/* Don't do this, since id property is no longer accessible. */
	$id = $contact_form->id; // Wrong.
	
	
}
add_action("wpcf7_before_send_mail", "wpcf7_do_something");

– Lấy thuộc tính cài đặt từ form, như: mail, mail_2, messages…

/* So, use prop() method to access them. */
$form = $WPCF7_ContactForm->prop( 'messages' );

Biến $form chứa giá trị chính là các nội dung messages thiết lập trong admin.

Array
(
    [mail_sent_ok] => Your message was sent successfully. Thanks.
    [mail_sent_ng] => Failed to send your message. Please try later or contact the administrator by 

another method.
    [validation_error] => Validation errors occurred. Please confirm the fields and submit it again.
    [spam] => Failed to send your message. Please try later or contact the administrator by another 

method.
    [accept_terms] => Please accept the terms to proceed.
    [invalid_required] => Please fill the required field.
    [captcha_not_match] => Your entered code is incorrect.
    [invalid_number] => Number format seems invalid.
    [number_too_small] => This number is too small.
    [number_too_large] => This number is too large.
    [invalid_email] => Email address seems invalid.
    [invalid_url] => URL seems invalid.
    [invalid_tel] => Telephone number seems invalid.
    [quiz_answer_not_correct] => Your answer is not correct.
    [invalid_date] => Date format seems invalid.
    [date_too_early] => This date is too early.
    [date_too_late] => This date is too late.
    [upload_failed] => Failed to upload file.
    [upload_file_type_invalid] => This file type is not allowed.
    [upload_file_too_large] => This file is too large.
    [upload_failed_php_error] => Failed to upload file. Error occurred.
)

Ví dụ khác:
Lấy và sửa lại thông tin email của form, rồi cập nhật vào database.

/* To set the properties, use set_properties() method, like this: */
$mail = $WPCF7_ContactForm->prop( 'mail' );
$mail['subject'] = "Well, hello, Dolly";
$WPCF7_ContactForm->set_properties( array( 'mail' => $mail ) );

Lấy đối tượng form instance hiện tại:

$current = WPCF7_ContactForm::get_current() ;

Lấy/thiết lập settings của form.
Mỗi form có phần nhập thêm biến Settings tại mục Additional Settings ở bên dưới, bạn nhập tên option và giá trị của option theo cấu trúc json/array ( key:value ). Với mỗi option bạn viết trên một dòng.

Để lấy setting chúng ta sử dụng hàm additional_setting cho form tương ứng.

$current = WPCF7_ContactForm::get_current() ;
$opt=$current->additional_setting( 'option1', false );

Hàm trả về giá trị mảng chứa nội dung của ‘option1’, như thế này:

Array
(
    [0] => "value option1";
)

Đây là một phần thuộc tính của form, cũng giống như cách lấy ’email’ Và bạn cũng có thể lấy toàn bộ chuỗi có trong mục Additional Settings, sử dụng hàm quản lý thuộc tính của form ở trên. Mục Additional Settings có tên ‘additional_settings’

$current->prop('additional_settings');

Và thiết lập thay thế additional_settings bởi hàm set_properties.

$wpcf7->set_properties( array(
        'additional_settings' => "on_sent_ok: \"location.replace('http://example.com//');\"",
    ) );

Gửi dữ liệu đi từ form

Bạn cũng có thể lấy template tag options trong khi người dùng nhấn nút submit. Thông tin shortcode options và dữ liệu của form được truyền giữa các lớp tạo bởi plugin và theo thứ tự để lấy instance của đối tượng contact form hiện tại bạn gọi phương thức get_instance. VÍ dụ sau lớp WPCF7_Submission quản lý dữ liệu form sau khi nhấn submit.

function wpcf7_do_something ($WPCF7_ContactForm) {
	// Our code will go here
	/* Use WPCF7_Submission object's get_posted_data() method to get it. */
	$submission = WPCF7_Submission::get_instance();
	if ( $submission ) {
		$posted_data = $submission->get_posted_data();
		
	}
}
add_action("wpcf7_before_send_mail", "wpcf7_do_something");

Sau khi dữ liệu trên form được gửi đi, class WPCF7_Submission sẽ tạo instance mới và bạn có thể lấy dữ liệu trên form với phương thức get_posted_data.
Chú ý: Bạn cũng có thể lấy thuộc tính posted_data từ đối tượng ContactForm $WPCF7_ContactForm, sử dụng một trong 2 cách này nếu như phiên bản wpcf7 bạn hỗ trợ.

/* WPCF7_ContactForm object no longer has a posted_data property. */
$posted_data = $WPCF7_ContactForm->posted_data; // Wrong.

Tuy nhiên vì hook này chạy trong vùng đón dữ liệu của form nên bạn có thể lấy dữ liệu form sử dụng biến thông thường $_POST.

function wpcf7_do_something ($WPCF7_ContactForm) {
	$submission = WPCF7_Submission::get_instance();
	if ( $submission ) {
		$_POST['field1'];
	}
}
add_action("wpcf7_before_send_mail", "wpcf7_do_something");

Sự kiện

wpcf7_before_send_mail
Sự kiện này kích hoạt trước khi người dùng submit form contact. Nếu bạn có ý định lưu dữ liệu form ra ngoài, thì thêm code vào tại hook này. Tham khảo ví dụ dưới đây:

function wpcf7_do_something ($WPCF7_ContactForm) {
	/* Use WPCF7_Submission object's get_posted_data() method to get it. */
	$submission = WPCF7_Submission::get_instance();
	
	if ( $submission ) {
		$posted_data = $submission->get_posted_data();
		//save form data
		$ch=curl_init();
		curl_setopt($ch,CURLOPT_URL,$url_action);
		curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
		curl_setopt($ch,CURLOPT_POST,true);
		curl_setopt($ch,CURLOPT_POSTFIELDS,$posted_data);
		curl_exec($ch);
	}
}
add_action("wpcf7_before_send_mail", "wpcf7_do_something");

wpcf7_mail_sent
Sự kiện này kích hoạt sau khi gửi mail thành công. Bạn có thể redirect URL sang trang thank you với form tương ứng, ví dụ:

function redir_after_form_sent($form) {
if ($form->title == "Ask a question") {
header('Location: /thank-you');
die();
}
}
add_action('wpcf7_mail_sent', 'redir_after_form_sent');

Sự kiện Javascript

Bằng cách khai báo các sự kiện kèm lệnh js vào mục “Additional settings”, theo cấu trúc:
event_name:'js-statements'

Sử dụng hàm lấy giá trị setting bạn có thể lấy bất kỳ tên setting nào, ví dụ mình lấy code js trong sự kiện ‘on_sent_ok’.

$on_sent_ok=$WPCF7_ContactForm->additional_setting( 'on_sent_ok' );

on_sent_ok
WPCF7 cho phép sử dụng lệnh javascript chạy cùng ajax trong việc sử lý dữ liệu của form.
Ví dụ điển hình redirect url sau khi gửi dữ liệu form thành công, nhảy đến trang cảm ơn.

on_submit
Sự kiện được kích hoạt sau khi nhấn submit form xong bất kể thành công hay thất bại. Ví dụ: tôi in chuỗi ra console.

on_submit:'console.log("abcvsđfdf")'

kết quả:

Thêm nội dung json vào kết quả trả về của form bởi ajax

Kết quả trả về của form là chuỗi json sau khi nhấn nút submit form bằng cách sử lý dữ liệu mặc định thông qua ajax. VD: nội dung json lỗi.

{"mailSent":false,"into":"#wpcf7-f310-p212-o1","captcha":null,"message":"Failed to send your message. Please try later or contact the administrator by another method."}

Bạn có thể thêm nội dung mới vào chuỗi json này, bằng cách sử dụng hook wpcf7_ajax_json_echo. Ví dụ sau đây lấy nội dung form settings vào kết quả trả về của form.

add_filter( 'wpcf7_ajax_json_echo', 'ajax_results_append',10,2);
function ajax_results_append($items,$result){
	$current = WPCF7_ContactForm::get_current() ;
	$items['option1'] =$current->additional_setting( 'option1', false );
	// send it back because it's a filter
	return $items;
}

Đoạn code trên, mình chèn thêm biến option1 của đối tượng json trả về bởi ajax. Tham số $items là mảng kết quả của form và được mã hóa với hàm json_encode thành chuỗi json. Mặc định $items chứa kết quả + nội dung sự kiện js của WPCF7 bạn có thiết lập và các biến tạo thêm giống như đoạn code ở trên.
Tương tự với tham số thứ 2 $result, lưu kết quả thông báo sau khi sử lý form. Ví dụ:

Array
(
    [status] => mail_failed
    [message] => Failed to send your message. Please try later or contact the administrator by another method.
    [demo_mode] => 
    [scripts_on_submit] => Array
        (
            [0] => location = 'http://example.com/';
        )

)

Trong đó các settings thuộc về sự kiện javascript trong contact form 7 (gồm: on_sent_ok, on_submit) sẽ khai báo tại biến $result này, trừ các settings ngoài khác.

Lỗi ajax form

Nếu bạn gặp lỗi, ajax trong khi gửi dữ liệu contact form 7, hình ảnh ajax đứng yên không mất đi và không thay vào đó là thông báo hiển thị kết quả sử lý của form. Vậy lỗi là nguyên nhân do đâu?

Đối với những ai thường viết ajax jquery và lấy kết quả trả về của ajax chắc chắn sẽ biết lý do vì sao. Vì submit form trả về đối tượng json nên không được chứa mọi ký tự khác ngoài. Hãy kiểm tra lại code đảm bảo không print/echo mọi chuỗi nào. Bạn có thể kiểm tra trong Chrome Console Development, bằng cách chuột phải tại trang web, chọn “Inspect Element”. Nhấn tiếp chuột phải tại cửa sổ Inspect Element, tick vào “Log XMLHttpRequests”.

Để xem kết quả của ajax bạn nhấn vào link ajax sau khi sử lý xong:

Hình trên có kết quả json đúng, nhưng bạn kiểm tra ngoài chuỗi json trả về có các ký tự khác sinh ra do lỗi PHP hoặc bạn cố tình print/echo ở đâu đó hay trong chính hook wpcf7_ajax_json_echo.

Lúc này, bạn sẽ thấy ảnh loading đứng yên không ẩn đi.

Bỏ qua gửi email

Bằng cách thiết lập thuộc tính skip_mail=false vào đối tượng form instance trước khi email được gửi đi, bạn sửa lại giá trị này trong sự kiện ‘wpcf7_before_send_mail’.

add_action( 'wpcf7_before_send_mail', 'wpcf7_disablEmailAndRedirect' );

function wpcf7_disablEmailAndRedirect( $cf7 ) {
    // get the contact form object
    $wpcf7 = WPCF7_ContactForm::get_current();

    // do not send the email
    $wpcf7->skip_mail = true;

    // redirect after the form has been submitted
    $wpcf7->set_properties( array(
        'additional_settings' => "on_sent_ok: \"location.replace('http://example.com//');\"",
    ) );
}

Bạn có thể test dễ dàng sự kiện js ‘on_sent_ok’, nếu wordpress của bạn chưa cấu hình gửi mail. Chép đoạn code trên vào file functions.php và kiểm tra nhé.

Loại bỏ ajax sử lý form

Mặc định, contact Form 7 load 3 files js (contact-form-7.js, jquery.form.js và jquery.js) vào page có chèn form, các files này cần cho ajax làm việc. Submit form mượt mà với ajax là cách hay mà wpcf7 đang áp dụng.

Tuy nhiên với những người dùng không thích tính năng này và không muốn load thêm 3 files sử lý ajax kèm theo form, bạn hoàn toàn có thể làm được. Khi hằng WPCF7_LOAD_JS có giá trị false (mặc định: true) Contact Form 7 sẽ không nạp các files .js trên. Bạn có thể thiết lập trong wp-config.php để loại bỏ tính năng ajax cho form.

define ('WPCF7_LOAD_JS', false );

Chú ý:
Nếu bạn thiết lập WPCF7_LOAD_JS= false nhưng muốn load ajax javascripts ở một pages nhất định thì gọi hàm wpcf7_enqueue_scripts() trong file template của bạn. Nhưng cẩn thận bạn cần gọi wpcf7_enqueue_scripts() trước khi gọi wp_head()
Có thể đặt vào hook ‘wp_enqueue_scripts’.

add_action('wp_enqueue_scripts','myjs');
function myjs(){
	if(is_page('page1')){
	wpcf7_enqueue_scripts();
	}
}

Tham khảo thêm

Chi tiết:
http://contactform7.com
http://contactform7.com/text-fields/
http://xaviesteve.com/3298/wordpress-contact-form-7-hook-unofficial-developer-documentation-and-examples/

Xem hỗ trợ Tạo kiểu trường contact form 7 trong plugin Advanced Custom Fields tại:
http://www.advancedcustomfields.com/add-ons/contact-form-7-field/

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