クライアントから以前の感じに戻してほしいと言われ、今後も同じような要望をもらいそうな気がしたので備忘録。WordPressでお問い合わせフォームを実装できるプラグインとして有名な「Contact Form 7」ですが、ver.3.6になったタイミングでエラーメッセージ表示の形式が変更され、固定形式がデフォルトとなりました。それを以前使用されていたフローティングティップ形式にする方法です。
「Contact Form 7」の公式サイトにも以下のように記載されていますが、アクセシビリティを損なうという理由から、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"］※上記で記述している［ ］のタグは、実際に使用するときは全角でなく半角で記述します。
以前からContact Form 7を使用している方であれば固定形式とフローティングティップ形式がそれぞれどのような動きなのか大体想像つくとは思いますが、ここ最近使い始めたという方や再度エラーメッセージの表示の動きを確認したいという場合は、以下公式サイトでもそれぞれの動きは確認することができます。
また、この内容に関しても公式サイトで紹介されているものです。