Jetpackが便利だと思いながら、やっぱり頼りになるプラグイン「Contact Form 7」ですが、しばらく導入しない間に「フローティングティップ形式」がデフォルトではなくなっていたとは知りませんでした。
フローティングティップとは、入力ミスなどがあった際にフワッと表示されるテキストです。マウスオンするとスーッと消えます。これはそもそもページ遷移せずにAjax送信を使っているのかな？
フローティングティップ形式メッセージ
フローティングティップ形式の検証エラーメッセージ。フワッと表示されてスーッと消えます。
2014/7/22現在のバージョンは3.9ですが、3.6からディフォルトから格下げされたそうです。
固定形式メッセージ
固定形式の検証エラーメッセージ。普通のテキストがフォーム要素の下に挿入されます。
検証エラーメッセージのカスタマイズ | Contact Form 7 [Japanese]
検証エラーメッセージの表示には2種類のオプション: 固定形式とフローティングティップ形式があります。現在は固定形式がデフォルトです。フローティングティップ形式は以前は Ajax 送信モードにおけるデフォルトオプションでしたが、アクセシビリティを損なうという理由で Contact Form 7 3.6 から格下げされました。
知らなかったおかげで、すげー悩んじゃいましたよ…。半日くらいムダにした…。
以前はよくあったんですよね、「Ajaxが動かない～」ってのが。原因はwp_head()とwp_footer()が抜けていたという間抜け話だったんですけど。もしくはfunctions.phpでヘッダへのScript書き出しを無効にしていたり、スクリプトを読み込む順番が違ったりとか。または、プラグイン同士の競合とかもあるみたいですけどね。
今回はそれらすべて確認してもダメだったので頭抱えちゃってたんですが、まさか本家サイトにちゃんと書いてあったとは。
「おいおい、本家サイトのデモもちゃんと動いてないよ！オレのと同じだよ！」
ということに気づいて、ようやく様子がおかしいことに気づいたのでした。
フローティングティップを有効にする方法
form 要素に’use-floating-validation-tip’ クラスを 付加します。[contact-form-7] ショートコードにクラスを追加するには html_class 属性を使うそうです。
//ショートコード例 [contact-form-7 id="1234" title="Contact form 1" html_class="use-floating-validation-tip"]