こんにちは！プロクラスの中山です。
皆さんはご自身のWebサイトにお問い合わせフォームを設置されていますか？企業やお店などのホームページなら大抵設置されていると思います。
今回はWordPressのお問い合わせフォーム制作についての記事なのですが、私が実施している「簡単ホームページ作成！はじめてのWordPress」の授業では触れない部分です。HTMLやCSSなどを編集するWebデザイナーなどの方向けの内容となっております。
（なので、わからん！と思ったらこの記事はスルーしてください）
バリデーションとは？
バリデーションという言葉を聞いたことがありますか？
簡単に言うと、お問い合わせフォームなどの入力チェックです。「必須項目に入力してください」や「半角英数字でご入力ください」など、入力が不完全な所をサポートしてくれる機能です。このようにユーザーが途中で入力をあきらめてしまわないようにサポートしてあげることで、フォームを送信してもらえる可能性が上がります。
コンタクトフォーム７でもこの機能が最初からついていますが、今回は外部のプログラムを使って、確認画面に行かなくてもその場でチェック（リアルタイムバリデーション）してくれるようにパワーアップさせたいと思います！
目次
目次
Contact Form7（コンタクトフォーム7）とは？
WordPressをお使いのサイトなら、プラグインを使えば5分以内にシンプルなお問い合わせフォームを設置できてしまいます。そう、これがかの有名な「Contact Form7」ですね！
プラグインをインストールして、ショートコードを記事の中に貼り付ければいっちょ上がりです。
最初から設定されている「お名前（必須）」「メールアドレス（必須）」「題名」「メッセージ本文」のままでよければこれでシンプルなフォームが完成してしまいます。
「はじめてのWordPress」の授業の中ではここまでで終了なのですが、Web制作をしている方ならもっとカスタムするという方が多いと思います。Contact Form7のプラグインを作った方は日本の方なので、使い方や便利な情報などが公式サイトで日本語で詳しく公開されています。いろいろとカスタムしたい方にはありがたいですね！
知ってると便利なContact Form7のオプションたち
公式サイトにも紹介されていますが、設置する入力欄たちにさまざまなオプションを追加することができます。
上記のように、フォームタグの中に「class:****」と間に入れるだけでinputタグにクラスやIDをつけることができます。
[ text* your-name class:proclass_input id:proclass_name ]
↓出力されるタグ
<input type=”text” name=”your-name” class=”proclass_input” id=”proclass_name“ />
※本当はもっとたくさんのclassなどが自動でつきますが省略しています。
classやidなどはCSSでデザインをカスタマイズしていくには必須ですね。後で紹介する「jQuery Validation Engine」を使う時など、他のプログラムと連携したい時にも役に立ちます。
このようなオプションはたくさん用意されているので、必要なものをつけるようにしましょう。
例えば、下記のように入力できる文字数に制限をつけることもできます。
[textarea your-message minlength:5 ]
同様に「maxlength」で最大文字数も指定することができます。または、数値の入力欄の場合は「min」「max」で入力できる数字を制限することもできます。（「min:0」にしてマイナスの数字を入力できなくする、など）
※「jQuery Validation Engine」を使用する場合はそちらで文字数や数字を制限することもできます。
【選択してください】ドロップダウンメニューの便利なオプション
Contact Form7の編集画面の上についている「フォームタグ生成」の中の「空の項目を先頭に挿入する」という箇所にチェックを入れると、最初から選択されていない状態にすることができます。
しかし、デフォルトの状態だと「- – -」と表示されてちょっとカッコ悪いですよね。「選択してください」などの文字を入れたいところです。
↓
どうしたものか。
そんな時には下記のオプションを使用しましょう。
[select* your-subject include_blank “授業についてのお問い合わせ” “採用についてのお問い合わせ” “その他”]
↓下記に変更する
[select* your-subject first_as_label “ご選択ください” “授業についてのお問い合わせ” “採用についてのお問い合わせ” “その他”]
↓
こちらのオプションは公式サイトには載っているのですが、管理画面のフォームタグ生成では出てこない項目なので知っておくと便利です。
他にも便利なオプションがあるので、困ったときはContactForm7の公式サイトを開いてみましょう！
※オプションをつける順番によってはうまく動かない場合もあるので、公式サイトで紹介されているオプション順に並び替えるなど調整してみてください。
jQuery Validation Engineでリアルタイムに入力チェック！
ここまではWordPressの管理画面内での作業でしたが、ここからはテーマファイルをカスタムしていく内容となります。
お問い合わせフォームをもっと便利にカスタムしたい方におすすめのjQueryプラグインが「jQuery Validation Engine」です。（こちらはWordPressのプラグインではないのでご注意ください）
このプラグインでできる内容は、入力している最中にエラーがあった際にリアルタイムですぐにメッセージをポップアップで表示してくれるというものです。また、送信ボタンを押したときにエラーが残っていたらスルスルとエラー箇所までスクロールして戻ってくれます。
Contact Form7と同じく、メールアドレスの形式や電話番号、最大・最小文字数の制限などさまざまなバリデーションが用意されているのでとても便利ですよ。
お問い合わせフォームのサンプル
下記のフォームの必須項目を入力せずにクリックだけして次の項目に進むと、その場でエラーメッセージが表示されます。
※入力した内容は送信されませんので（そもそも送信ボタンをつけていないので）ご安心ください。
jQuery Validation Engineの設置方法
WordPressの場合はfunctions.phpに下記を記載すれば必要なファイルの読み込みは完了です。
※コピペして「’」が変換されてしまった場合はその部分を打ち変えてください。
//問い合わせフォームのリアルタイムエラーチェック
function theme_name_scripts() {
wp_enqueue_style( ‘validationEngine.jquery.css’, ‘https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css’, array(), ‘1.0’, ‘all’);
wp_enqueue_script( ‘jquery.validationEngine-ja.js’, ‘https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js’, array(‘jquery’), ‘2.0.0’, true );
wp_enqueue_script( ‘jquery.validationEngine.js’, ‘https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js’, array(‘jquery’), ‘2.6.4’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );
あとは、header.phpの中に必要な情報を書き込むだけです。
このあたりの詳細はこちらのページに詳しく書かれていますのでご覧ください。
<script type=”text/javascript”>
//コンタクトフォームリアルタイムチェック
jQuery(document).ready(function(){
jQuery(“#フォームのID名“).validationEngine();
});
jQuery(document).ready(function(){
jQuery(“.text”).addClass(“validate[required]”);
jQuery(“.mail_address”).addClass(“validate[required,custom[email]]”);
jQuery(“.message”).addClass(“validate[required,minSize[3],maxSize[100]]”);
});
</script>
Contact Form7で「#フォームのID」をつけるには、ショートコードを記事本文に貼り付けるときに下記のように記載する必要があります。
[ contact-form-7 id=”***” title=”Contact form sample” html_id=”フォームのID”]
jQuery Validation Engineのエラーメッセージの吹き出し表示をやめてインライン表示する
デフォルトの状態だと、エラーメッセージは吹き出し型のポップアップが出てくる仕様なのですが、サンプルのフォームでは少々カスタムして入力欄の下に出てくるようにしています。
サンプルのように入力欄の下にエラーメッセージを表示したい場合は下記のように書き加えてください。
jQuery(“.text”).addClass(“validate[required]”);
↓
jQuery(“.text”).addClass(“validate[required]”).attr(‘data-prompt-position’, ‘inline’);
あとはCSSで見た目を整えましょう。
入力欄の上にエラーメッセージを表示したい場合はCSSだけで修正できるのですが、下記のようにエラーメッセージのせいで入力欄の位置がずれてしまうので注意しましょう。
ヘッダーを固定している時のスクロール位置調整オプション
ヘッダーを固定にしているサイトの場合は「送信」ボタンを押したときのスクロールで入力欄がヘッダーの下に隠れてしまうことがあると思います。そんな時はヘッダーの高さ分ずらした位置にスクロールしてくれるオプションがあるので、header.phpに記載した部分のはじめのところを下記のように書き換えましょう。
//コンタクトフォームリアルタイムチェック
jQuery(document).ready(function(){
jQuery(“#sample_form”).validationEngine({
scrollOffset: 170 //送信ボタンクリック時にヘッダーの高さ分ずらす
});
});
ちなみに、送信ボタンを押したときにContact Form7の元々の機能でもエラーメッセージを出してくれるので、jQuery Validation Engineを設置した時はCSSなどでContact Form7のエラーメッセージを非表示にするようにしましょう。
他にもいろいろ！お問い合わせフォームのカスタム
他にも、「Contact Form 7 add confirm」ですぐに送信せず確認画面をつけたりすることも多いです。郵便番号を入れたら住所が自動で入力される「Yubinbango.js」などを組み込むのも便利ですね！
プログラムをご自身で組んでいろいろな機能をつけるのもいいですが、フォームのカスタムって結構大変ですよね。ここでご紹介したContact Form7の元々の機能やjQuery Validation Engineで細かくカスタムしていくのも結構骨の折れる作業ですが、いろんなものを活用してお問い合わせフォームをより便利にカスタムしましょう！
