最近よく目にするEFO(エントリーフォーム最適化)、その中で重要でかつ、あまり実践されていないのが、ユーザーがどの入力項目にエラーがあるのかリアルタイムで把握できる機能ではないでしょうか。僕もよく、入力が完了し送信ボタンをクリックした後に、「全角で入力してください」とエラーを出されイライラさせられるフォームに出会います。僕は慣れているのでこれでフォームから離脱することはないのですが、あまりパソコンやスマホに慣れていない人は面倒くさくなって離脱してしまうという気持ちが分かります。リアルタイムでエラーをテェックできる機能を追加できないかと思いやってみました。今のところ問題なく動作しています。7にjQuery-Validation-Engineを使ってリアルタイムでエラーをチェックしています。↓が作成したDEMOフォームです。送信ボタンを押してもどこにも送信されないので、お気軽に動作確認をしてみてください。jQuery-Validation-EngineはCDNで配信されているので、functions.phpに下記のように記述します。バージョンは最新のものに変更してください。);または<head></head>内(jquery.jsより後ろ)や</body>直前など適切な場所に下記の記述をしてもいいです。ダウンロードしてファイルをサーバーにアップロードしてください。https://github.com/posabsolute/jQuery-Validation-EnginejQuery-Validation-Engineの実行コードjQuery-Validation-Engineを実行するコードを「jquery.validationEngine.min.js」より後ろに記述します。<script>jQuery(document).ready(function(){jQuery("#formID").validationEngine();});</script>jQuery(“#formID”)の「#formID」の箇所は、form要素のidを記述します。7のデフォルト状態ではform要素にid属性が付与されていないので、idを追加します。form要素にid属性を追加するには、contact-form-7のショートコードにhtml_id属性を追加すれば任意のidを追加できます。7のエラーチェックをCSSで表示しないようにします。いう形のclass属性を追加します。追加すれば、リアルタイムでバリデーションを行います。してあげると、Emailとして入力してあるかをチェックします。その他、文字数のチェックとは英字のチェックとかを行うための記述方法がいろいろあります。以下のサイトにこの辺りのことが詳しく書いてあるので、詳しくはこちらを参考にしてください。メソッドを使って追加します。参考までに、↓にデモで使っているjQueryを載せておきます。7のHTMLソースです↓。エラー表示が崩れてしまうので、以下のCSSを追加して回避しました。static;}jQuery-Validation-Engineのバリデーションの吹き出しの影が好きじゃなかったので、以下のCSSを追加して、ボーダーとシャドーを消しました。7のバージョンアップで機能しなくなる可能性もあるので、バージョンアップ時はテストした方がいいかと思います。PMじぇりこ39さん、こんばんは。コメントありがとうございます。最新バージョンだとエラーが2重に出てしまっていました。側のエラーメッセージを、CSSで非表示にしました。none;}もう少しスマートな方法がないか調べてみます。コメントをキャンセルメールアドレスが公開されることはありません。