Contact Form 7 là một plugin cho WordPress cho phép bạn tạo và quản lý các mẫu liên hệ đầy đủ tính năng trên trang web của bạn dễ dàng và nhanh chóng. Bạn có thể tải dễ dàng tại đây
Tuy nhiên, tùy biến vài tính năng trên plugin này không được dễ dàng và thuận tiện cho lắm. Nếu bạn gặp một vài lí do nào đó khiến cho thông báo hiển thị lỗi hiển thị không như bạn muốn. Bạn muốn di chuyển thông báo này ra chỗ khác thuận tiện cho code của bạn hơn. Cách này có thể giúp bạn
Cơ bản, bạn cần code này trong file function.php
add_filter('wpcf7_ajax_json_echo', 'my_wpcf7_custom_item_error_position', 10, 2);
function my_wpcf7_custom_item_error_position($items, $result)
{
$class = 'custom-error-message'; // custom class bạn có thể đặt tùy ý
// các input name bạn cần thay đổi vị trí thông báo
$names = array(
'your-family-name',
'your-first-name',
'your-family-name-kana',
'your-first-name-kana',
'your-birth-year',
'your-birth-month',
'your-birth-day',
);
if (isset($items['invalidFields'])) {
foreach ($items['invalidFields'] as $k => $v) {
$orig = $v['into'];
$name = substr($orig, strrpos($orig, ".") + 1);
if (in_array($name, $names)) {
$items['invalidFields'][$k]['into'] = ".{$class}.{$name}";
}
}
}
return $items;
}Lưu ý:
custom-error-message là class bạn đã đặt trong function.php
[your-first-name] là name của input bạn đã đặt trong contact form 7
Nếu bạn cần thay đổi thông báo của input nào thì cứ điền name của input đó vào đây nhé. Vì vậy, bạn có thể linh hoạt input nào bạn cần thay đổi vị trí.
$names = array(
'your-family-name',
'your-first-name',
'your-family-name-kana',
'your-first-name-kana',
'your-birth-year',
'your-birth-month',
'your-birth-day',
);Và trong màn hình admin của contact form 7, nó sẽ tương tự như thế này
<div class="smf-data-field">
<div class="smf-field-row">
[text* your-family-name placeholder "family name"]
[text* your-first-name placeholder "first name"]
</div>
<span class="custom-error-message your-first-name"></span>
</div>Cũng tương tự ở function.php, có hai thứ bạn cần để ý
custom-error-message là class bạn đã đặt trong function.php
[your-first-name] là name của input bạn đã đặt trong contact form 7
Bạn có thể đặt thẻ span này ở bất cứ nơi đâu bạn muốn hiển thị thông báo lỗi của input tương ứng
<span class="custom-error-message your-first-name"></span>Nó sẽ hiển thị thông báo lỗi của input có name là your-first-name. Tương tự như sau:
<input type="text" name="your-first-name"/>Snippet
Nếu có bất kì thắc mắc nào về plugin, bạn có thể hỏi tác giả qua trang support của họ tại đây