デモサイトはじめにウェブサイトを訪問して、製品・サービスに興味を持ってくれたユーザが問い合わせをしてくれるフォームですが、これがとても大切なパーツであるということが最近よく言われています。Optimization)がとても大切です。フォームの入力がスムースに進むようにサポートしてあげることがとても大切なことはこれまでの記事でもご紹介いたしましたが、今回、その中でとても大切なパートをご紹介します。Contactform7の標準機能でも入力に間違いがあると、「送信」ボタンを押した後にエラーメッセージがでますが、もっとユーザビリティを向上させたいですよね。7にjQuery-Validation-Engineを組み込んでリアルタイムで入力エラーをチェックする方法をご紹介します。当社ウェブサイトの「お問合せデモページ」をご覧ください。導入は慣れてしまえば簡単です。導入方法は、いくつかの方法があります。Githubからダウンロードして、自分のサイトのディレクトリに保存する方法が先々を考えるとよいのですが、今回はず確実に導入できる方法をご紹介します。「外観」―「テーマの編集」をクリックテーマファイルのheader.phpをクリックします。ここに以下のコードをコピペしてください。Default1<head></head>内のjquery.jsより後ろの位置かあるいは、</body>直前など適切な場所に以下のコードをコピペしてください。src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'&gt;&lt;/script&gt;Default1jQuery-Validation-Engineの実行コード記述jQuery-Validation-Engineを実行するコードをheader.phpで記述したコードの後ろに記述します。(「jquery.validationEngine.min.js」より後ろに記述してください。&lt;/script&gt;12345&lt;script&gt;jQuery(document).ready(function(){jQuery("#formID").validationEngine();});&lt;/script&gt;ここに書いている、#formIDはJscriptのidを記述してください。注意してほしいのですがformIDの前の#は消さないでください。7のデフォルト状態ではform要素にid属性が付与されていないので、idを追加して書き込みます。固定ページにフォームを作成しますが、この時記述するcontact-form-7のショートコードにhtml_id属性を下記のように追加すれば任意のidを追加できます。いう形のclass属性を追加します。追加すれば、リアルタイムでバリデーションを行います。してあげると、Emailとして入力してあるかをチェックします。メソッドを使って追加します。jQueryは以下の通りです。</span>デモサイトDefaultデモサイトはこちらです。私も最初はうまく表示できなくて悩みました。絶対できますのであきわめないでください。してもわからなければお問い合わせください。ありがとうございました。123456789101112デモサイトはこちらです。http://alexandco-global.tokyo/validation_demo/いかがでしょう?うまく表示できましたか?私も最初はうまく表示できなくて悩みました。絶対できますのであきわめないでください。してもわからなければお問い合わせください。ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。7」で予約フォームがなんとか完成。