Contact Form 7で特定の入力項目のエラーメッセージの位置を変更する

Contact Form 7ではフォームの必須項目のチェックなどを自動的に行なってエラーメッセージを表示してくれる機能があり、とても便利です。

ただ、入力項目のエラーの位置が決まっているため、複数の入力項目を組み合わせた項目を設けたい場合などにメッセージが出てほしい場所に出てくれないことがあります。

(例: 「好きなもの」というチェックボックスを設け、「その他」の場合は手で入力させるフォームを作った場合)

スクリーンショット_2016-01-07_17_28_11

標準の状態だと、エラーメッセージが「その他」とテキスト欄の間に出てきてしまいます。

スクリーンショット_2016-01-07_17_28_24

このメッセージの位置を変更するには、下記のように行います。

例のように「その他」に自由入力欄を設けることのみを目的にしている場合は「Contact Form 7のラジオボタンやチェックボックスにテキスト欄を追加する (free_text)」のほうが簡単で便利です(エラーメッセージもテキスト欄のあとに表示されます)。下記は郵便番号欄を2つに分ける(3桁-4桁)場合など、他のケースにも応用ができます

1. エラーメッセージを表示させたい場所に特別なタグを配置する

まず、フォームのコード内のエラーメッセージを表示させたい場所に、「<span class="エラー用のクラス名 項目名"></span>」を追加します。(エラー用のクラス名はなんでもよいです。項目名はContact Form 7の"your-name"などの項目名になります)

例えば上記の例の場合、フォームのコードを下記のようにします。

2. functions.phpに位置変更用のコードを記載する

functions.phpに下記のような位置変更用のコードを記載します。

$class = 'wpcf7-custom-item-error';wpcf7-custom-item-error の部分は、1.で設定したエラー用のクラス名と合わせてください。

$names = array( 'fav' ); の部分は、フォームの項目名を設定します。複数の項目を対象にできます。例えば item1とitem2の2つの項目を対象にしたい場合は $names = array( 'item1', 'item2' ); とします。

以上で設定は終了です。

結果

先程の「好きなもの」の例だと、下記のようにメッセージが移動しているのが確認できます。

スクリーンショット_2016-01-07_17_48_46

おまけ

「好きなもの」に「その他」が選択されていて、テキスト欄が記入されていない場合にエラーにしたい場合は下記のように変更することで実現できます。

(フォームのコード。エラー用のタグに fav-etc(その他のテキスト欄の項目名) を追加)

(functions.php。$namesに fav-etc を追加し、その他のテキスト欄用の特別な入力チェックを追加します。)

結果

スクリーンショット_2016-01-07_18_46_01

更新履歴

  • 2016/10/07 「その他」に自由入力欄を追加する別の方法について説明を追加しました。
  • 2016/01/07 初版

 

 

コメント

内容の誤りなどがありましたら下記からご連絡をお願いします。頂いたコメントは基本的に公開されることはありません(必要な場合は個別に返信させて頂きます)。

CAPTCHA