This page is also available in English.

フォームの送信内容に適正でない入力値が含まれる場合(必須項目が入力されてないとかメールアドレス項目に正しくないフォーマットの入力があるなど)、フォームは検証エラーメッセージを表示します。ここでは Contact Form 7 が出力する検証エラーメッセージのカスタマイズ方法について説明します。

テキストを変更する

個々のタイプのエラーメッセージについてそれぞれテキストの変更が可能です。例えば、必須項目のデフォルトのメッセージは「必須項目に記入もれがあります。」です。このメッセージを変更するには、管理ページに移動して、メッセージ欄のテキストを編集します。

固定形式とフローティングティップ形式

検証エラーメッセージの表示には2種類のオプション: 固定形式とフローティングティップ形式があります。現在は固定形式がデフォルトです。フローティングティップ形式は以前は Ajax 送信モードにおけるデフォルトオプションでしたが、アクセシビリティを損なうという理由で Contact Form 7 3.6 から格下げされました。

二つの形式の違いは次のデモフォームを見ればよくわかります。

固定形式

フローティングティップ形式

それぞれの形式には長所と短所があります。

	長所	短所
固定形式 (デフォルト)	より良いアクセシビリティ Ajax / 非 Ajax の両送信モードで挙動に違いがないこと	インラインフィールドで使われた場合にレイアウトを崩すことがある
フローティングティップ形式	インラインフィールドでもレイアウトを崩すことがない	アクセシビリティを損なう Ajax 送信モードでのみ機能する

通常は、アクセシビリティ上の問題を起こしにくい固定形式の使用が推奨されます。フォームにインラインのフィールドがあり、固定のエラーメッセージブロックをそれらの後に挿入するとレイアウトが崩れる場合には、フローティングティップ形式を使うべきでしょう。

検証エラーメッセージの形式を切り替えるのは簡単です。特定の項目に限ってフローティングティップ形式を適用することも、またフォームのすべての項目に適用することも可能です。基本ルールは、もしある要素が ‘use-floating-validation-tip’ というクラスを持っていたら、その要素の中にある項目ではフローティングティップ形式が使われるというものです。

いくつか例を用いて説明します。特定の入力項目にフローティングティップ形式を適用するには、その項目を ‘use-floating-validation-tip’ クラスを持った要素の中に置きます。

例:

<span class="use-floating-validation-tip">[text* your-name]</span>

フォーム内のすべての項目に適用したいなら、’use-floating-validation-tip’ クラスを form 要素に付加します。[contact-form-7] ショートコードに html_class 属性を加えることで実現できます。

例:

[contact-form-7 id="1234" title="Contact form 1" html_class="use-floating-validation-tip"]

非 Ajax 送信モードでは設定に関係なく固定形式が使われます。