Contact form 7のフォームタグを必須項目に指定すると、未入力の場合は送信時にエラーメッセージが表示されます。
基本的な仕様として、以下の通りです。
- エラーメッセージはフォームタグ毎に表示される
- メッセージ表示位置は各フォームタグの直下
この仕様が問題になるのは、以下の様な場合です。
- 1つの項目でフォームタグを複数組み合わせている場合にメッセージを1つにまとめたい
- メッセージの表示位置を変更したい
この記事では、Contact form 7でcheckboxを使っている時のエラーメッセージの表示位置の変更方法を説明します。
Contact form 7のメッセージの変更と組み合わせて、この記事を読むことで好きな位置に好きなメッセージを表示することができるようになります。
Contact form 7 エラーメッセージ表示位置変更
Contact form 7フォームの記述(checkbox)
Contact form 7のフォームで同一のname属性(catalog)を持つcheckboxを以下のように分けて記述していたとします。
通常、checkboxフォームタグで単純に選択肢を並べるだけであれば分けて記述しません。しかし、チェックボックス毎に異なるHTMLや画像を使用する場合には、分けて記述しないと実現できません。
[checkbox* catalog "AA"]
[checkbox* catalog "BB"]
[checkbox* catalog "CC"]
checkboxのvalidationエラーメッセージがcheckbox毎に表示される
Contact form 7では、checkboxフォームタグを分けて記述すると、エラーメッセージが各checkboxの下に表示される仕様です。
チェックボックスは同じnameなので、エラーメッセージを1つにしたい時にはカスタマイズが必要になります。
また、別のケースとして、checkboxをCSSでボタンに変更しているとします。その時はエラーメッセージが各ボタン内部に表示されてしまいます。
ボタンの外にメッセージを表示したい時にもエラーメッセージ表示位置のカスタマイズが必要になります。
checkboxのエラーメッセージ位置変更スニペット
エラーメッセージはname属性ごとに出力する場所を変更することができます。
以下の例は、catalogというname属性を対象にエラー表示位置を変更する例です。
function wpcf7_custom_item_error_position( $items, $result ) {
$class = 'wpcf7-custom-item-error';
$names = array( 'catalog' ); // name属性を指定
if ( isset( $items['invalid_fields'] ) ) {
foreach ( $items['invalid_fields'] as $k => $v ) {
$orig = $v['into'];
$name = substr( $orig, strrpos($orig, ".") + 1 );
if ( in_array( $name, $names ) ) {
$items['invalid_fields'][$k]['into'] = ".{$class}.{$name}";
}
}
}
return $items;
}
add_filter( 'wpcf7_ajax_json_echo', 'wpcf7_custom_item_error_position', 10, 2 );
フォーム側でエラーメッセージ表示位置を指定
エラーメッセージを表示したい場所に以下の記述を追加します。
<span class="wpcf7-custom-item-error catalog"></span>
name属性をclassとして追加するのがポイントです。上記の例だとcatalogがclass名になります。
チェックボックス毎にメッセージを表示したい場合
チェックボックスの数だけ、メッセージを表示したい位置に上記のスニペットを記述します。メッセージはすべて同じです。
[checkbox* catalog "AA"]
<span class="wpcf7-custom-item-error catalog"></span>
[checkbox* catalog "BB"]
<span class="wpcf7-custom-item-error catalog"></span>
[checkbox* catalog "CC"]
<span class="wpcf7-custom-item-error catalog"></span>
エラーメッセージを一つにまとめたい場合
メッセージを表示したいところに上記の一行を一つだけ記述します。
[checkbox* catalog "AA"]
[checkbox* catalog "BB"]
[checkbox* catalog "CC"]
<span class="wpcf7-custom-item-error catalog"></span>
まとめ
Contact form 7はとても便利で、フォームタグが吐き出すHTMLを理解すれば、あとは少しのカスタマイズでやりたいことは、ほぼ実現できます。
同一name属性のcheckboxを別々のフォームタグで記述した場合のエラーメッセージ表示位置の変更というのは結構使う場面がありますので、その時は今回の記事が参考になると思います。