Thay đổi thuộc tính thẻ Form.
Thêm thuộc tính name, class và id cho thẻ form.
Bạn có thể thêm thuộc tính ‘id’ và ‘class’ cho form bằng cách thêm thuộc tính html_id và html_class vào shortcode [ contact-form-7 ].
|
[ contact-form-7 id="1234" title="Contact form 1" html_name="form-name" html_id="contact-form-1234" html_class="form contact-form" ]
|
Bạn cũng có thể sửa lại mọi thuộc tính form bằng cách sử dụng filter:
|
//Thay đổi 'html_id'
add_filter('wpcf7_form_id_attr','change_wpcf7_id');
function change_wpcf7_id($form_id_attr){
return $form_id_attr;
}
//change html_name
add_filter('wpcf7_form_name_attr','change_wpcf7_name');
function change_wpcf7_id($form_name_attr){
return $form_name_attr;
}
//change html_class
add_filter('wpcf7_form_class_attr','change_wpcf7_class');
function change_wpcf7_id($form_class_attr){
return $form_class_attr;
}
|
Khai báo thuộc tính encrypt cho form.
|
add_filter('wpcf7_form_enctype','change_wpcf7_form_enctype');
function change_wpcf7_form_enctype($form_enctype){
return $form_enctype;
}
|
Chú ý: thuộc tính shortcode contact-form-7 tạo thuộc tính cho thẻ form cần khai báo sau thuộc tính id và title, nếu không sẽ vô tác dụng.
Kết quả hiển thị sau khi nhấn nút submit trên form.
Kết quả trả về sau khi người dùng gửi dữ liệu đi từ form, được sử lý bởi shortcode [response] . Bạn có thể di chuyển thông báo này ở bất kỳ vị trí nào bằng cách đặt shortcode [ response ] trong form template. được phép sử dụng nhiều lần ở nhiều vị trí trùng lặp đều hiển thị chung nội dung messages.
|
[response]
Your Name (required)
[ text* your-name ]
Subject
[ text your-subject ]
Your Message
[textarea your-message]
[response]
[submit "Send"]
|
Ngoài ra có thể can thiệp và thay đổi nội dung tin nhắn này với hook 'wpcf7_form_response_output'.
|
add_filter('wpcf7_form_response_output','change_wpcf7_form_response',10,4);
function change_wpcf7_form_response($output, $class, $content, $this){
return $output;
}
|
Sử dụng shortcode bên ngoài cho việc tạo trường form.
Bạn muốn sử dụng shortcode thực thi trong nội dung tạo trường form trong wpcf7. Để làm điều này bạn sẽ cần gọi hàm do_shortcode trong nội dung form đã sử lý trước khi hiển thị trên website. Chúng ta sử dụng hook wpcf7_form_elements.
|
add_filter( 'wpcf7_form_elements', 'mycustom_wpcf7_form_elements' );
function mycustom_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );
return $form;
}
|
Lưu ý:
-
Sửa nội dung form fields.
Xóa thẻ span bao quanh trường field.
Mặc định wpcf7 bao mọi trường bằng thẻ span, không có cách nào để xóa đi thẻ này mà bắt buộc chúng ta pải can thiệp vào file plugins gốc, ví dụ
Thay đổi action URL.
Đôi khi bạn muốn dữ liệu form gửi đến một địa chỉ khác, wpcf7 không giới hạn hooks cho bạn tùy biến nhé:
|
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url($url)
{
global $post;
$id_to_change = 1;
if($post->ID === $id_to_change)
return get_bloginfo('template_url').'/wheretopost.asp';
else
return $url;
}
|
Chuyển phương thức sử lý dữ liệu GET/POST.
Mặc định form sử dụng phương thức POST để truyền dữ liệu đi, nếu bạn muốn chuyển sang phương thức GET, chúng ta sẽ hack 1 chút vào file includes/contact-form.php
Mở file trong notepad++. Tìm:
|
wpcf7_format_atts( array(
'action' => esc_url( $url ),
'method' => 'post',
|
Đổi thành:
|
wpcf7_format_atts( array(
'action' => esc_url( $url ),
'method' =>apply_filters('wpcf7_form_method','post'),
|
Và lúc này trong theme functions.php
|
add_filter('wpcf7_form_method','wpcf7_form_method_');
function wpcf7_form_method_($method){
return 'get';
}
|
Thay đổi hình loading.
Hình loading thể hiện trạng thái form đang hoạt động chỉ hoạt động khi bạn kích hoạt sử lý ajax trong contact form. Hãy chắc chắn bạn không thiết lập giá trị hằng:
define ('WPCF7_LOAD_JS', false );
Sử dụng filter 'wpcf7_ajax_loader' bạn có thể thay đổi mọi hình ảnh sẽ xuất hiện ngay sau khi người dùng nhấn nút submit.
|
/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}
|
Chỉ định trang:
|
// Change the URL to the ajax-loader image, other way
function change_wpcf7_ajax_loader($content) {
if ( is_page('contact') ) {
$string = $content;
$pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
$replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
$content = preg_replace($pattern, $replacement, $string);
}
return $content;
}
|
- Tùy biến giao diện contact form: Xóa stylesheet mặc định.
Thêm CSS làm đẹp cho form nếu như bạn không muốn sử dụng css mặc định trong plugin wpcf7. Chúng ta tắt hằng WPCF7_LOAD_CSS
|
define('WPCF7_LOAD_CSS', false);
|
Hoặc một cách khác ngoài cách tắt stylesheet bởi hằng WPCF7_LOAD_CSS, bằng cách xóa tên handle style 'contact-form-7' tạo bởi wp_enqueue_style
|
function remove_wpcf7_stylesheet() {
wp_dequeue_style('contact-form-7');
}
add_action( 'wp_enqueue_scripts' , 'remove_wpcf7_stylesheet' );
|
- Mặc định wpcf7 gửi dữ liệu đi sử dụng công nghệ ajax, tuy nhiên nếu muốn dữ liệu gửi trực tiếp vào trang hiện tại bạn có thể thiết lập hằng WPCF7_LOAD_JS=false. Thêm vào file wp-config.php
|
define('WPCF7_LOAD_JS', false);
|
Nếu bạn không thích can thiệp sửa vào file hệ thống wp-config.php chúng ta sẽ cần loại bỏ hàm liên kết với hook init: wpcf7_enqueue_scripts giống như sau:
|
if ( function_exists('wpcf7_contact_form') ) {
if ( ! is_admin() && WPCF7_LOAD_JS )
remove_action( 'init', 'wpcf7_enqueue_scripts' );
}
|
Bạn sẽ kích hoạt lại chế độ sử lý Ajax với form ở một số trang bằng cách gọi hàm wpcf7_enqueue_scripts();
|
// Add the Contact Form 7 scripts on selected pages
function add_wpcf7_scripts() {
if ( is_page('contact') )
wpcf7_enqueue_scripts();
}
add_action( 'wp', 'add_wpcf7_scripts' );
|
