お問い合わせはコチラから

【コピペ可能】Contact form 7のvalidationメッセージ表示位置を変更したい【checkbox】

サイト運営

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を別々のフォームタグで記述した場合のエラーメッセージ表示位置の変更というのは結構使う場面がありますので、その時は今回の記事が参考になると思います。

タイトルとURLをコピーしました