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

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

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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