クライアントから以前の表示に戻してほしいと言われて、今後も同じような要望をもらいそうな気がしたので備忘録です。
WordPressでお問い合わせフォームを実装できるプラグインとして有名な「Contact Form 7」ですが、Ver 3.6になったタイミングでエラーメッセージ表示の形式が変更され、固定形式がデフォルトとなりました。
それを以前使用されていたフローティングティップ形式にする方法です。

プラグインの公式サイトにも以下のように記載されているように、アクセシビリティを損なうという理由でVer 3.6からデフォルトのエラーメッセージ表示の形式が固定形式へと変更されました。

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

 

固定形式の長所のひとつとしても挙げられている“Ajax / 非Ajaxの両送信モードで挙動に違いがない”という点で個人的にも固定形式がデフォルトになっているのは良いと思うのですが、今回のクライアントのようにとにかくフローティングティップ形式を使いたいという場合は下記のように記述することで形式を変更できます。

特定の項目にフローティングティップ形式を適用

名前のみやメールアドレスのみというように、特定の項目にだけフローティングティップ形式を適用したい場合は、以下のように.use-floating-validation-tipというクラスを持つ要素で該当の項目を括ることで実装できます。

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

全項目にフローティングティップ形式を適用

全項目にフローティングティップ形式を適用したい場合は、上記でも使用した.use-floating-validation-tipというクラスをform要素に付加することで実装できます。
ショートコードを使用して表示させているという場合は、下記のようにhtml_class属性を使用して記述します。

[contact-form-7 id="0000" title="Form Name" html_class="use-floating-validation-tip"]

以前から使用しているなら固定形式とフローティングティップ形式がそれぞれどのような動きなのか大体想像つくとは思いますが、ここ最近使い始めた場合や再度エラーメッセージの表示の動きを確認したい場合は、以下公式サイトでもそれぞれの動きは確認することができ、今回紹介した方法についても以下公式サイトで紹介されているものです。