ContactForm7のエラー文言の表示位置が崩れる場合の対処法

ここのURLをクリップボードにコピー(copied!)

今まででは適切に表示されていたContactForm7のエラー文言の表示位置が突然崩れてしまった。。。
その原因と、対処法をご紹介します。

先に結論！

• ContactForm7のバージョンアップ(5.3以降)で、エラー時のアイテム配列キー「invalidFields」が「invalid_fields」に変更された
• functions.phpに記述している「invalidFields」を「invalid_fields」に変更することで解決！

(そもそも)エラー文言の表示位置の変更の方法

ContactForm7では、プラグインをインストールした直後の状態では、フォーム送信エラー時に表示されるエラー文言は、各フォームの下に自動的に表示されるようになっています。

それでは「レイアウト的に見づらい」「デザインをカスタマイズしたい」という状況が起きてきます。

そこで、エラー文言を自分の意図した場所に表示させたいという方法がこちら。

ContactForm7のプラグインのバージョンによって、記述方法が若干異なります！(16行目と17行目)

テーマファイル内「functions.php」に以下のPHPコードを追加します。

ContactForm7のバージョンが「5.3以上」の場合

function wpcf7_custom_item_error_position( $items, $result ) {
  // メッセージを表示させたい場所のタグのエラー用のクラス名
 $class = 'wpcf7-custom-item-error';
 // メッセージの位置を変更したい項目名(※適宜ご自身の設定したものに変更してください)
 $names = array(
  "your-name",
  "your-companyname",
  "your-email",
  "your-body",
  "your-tel",
  "your-fax",
  "your-zip",
  "your-address",
 );
 // 入力エラーがある場合
 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['invalidFields'][$k]['into'] = ".{$class}.{$name}";
   }
  }
 }
 return $items;
}
add_filter( 'wpcf7_ajax_json_echo', 'wpcf7_custom_item_error_position', 10, 2 );

ContactForm7のバージョンが「5.3未満」の場合

function wpcf7_custom_item_error_position( $items, $result ) {
  // メッセージを表示させたい場所のタグのエラー用のクラス名
 $class = 'wpcf7-custom-item-error';
 // メッセージの位置を変更したい項目名(※適宜ご自身の設定したものに変更してください)
 $names = array(
  "your-name",
  "your-companyname",
  "your-email",
  "your-body",
  "your-tel",
  "your-fax",
  "your-zip",
  "your-address",
 );
 // 入力エラーがある場合
 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;
}
add_filter( 'wpcf7_ajax_json_echo', 'wpcf7_custom_item_error_position', 10, 2 );

配列の関数「$names」には、ご自身で設定した「項目名」を追加／変更してください。
※「項目名」は下図の赤枠部分にあたります

さらに、ContactForm7のHTMLタグ内に、「wpcf7-custom-item-error」と「項目名」をクラスに持つHTML要素を追加します。
※下図の赤枠部分

この2つの対応で、エラー文言を自由な箇所に追加することが可能になります。