【WordPress】Contact form7にチェックボックスをつけて、スパム&誤送信対策

Wordpressに簡単にお問い合わせフォームを設置するプラグイン「Contact form 7」ですが、確認画面がなかったり、入力途中で誤送信してしまう可能性があったり、とちょっとした不都合があります。
それらの問題を、チェックボックスをつけるだけで、予防してしまいましょう!

突然ですが新サービスのおしらせです ちびキャラ おまちしてます!

チェックボックスをつけるとどうなるの?

Contact form7にチェックボックスをつけるメリットは、主に3つあります。
  1. スパム対策
  2. メール送信時に確認画面が出ないことについての注意喚起
  3. 入力途中でのうっかり誤送信を予防

特に難しい設定も必要なく、これだけのメリットがありますので、試してみて損はないですね。

そのへんの細かいお話は、こちらの記事がすごく丁寧でわかりやすかったです! 意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント

上の記事では、[checkbox*]を使った方法を紹介しているので、このブログでは[acceptance]を使ったやり方をご説明します。

「承諾の確認」タグを作成する

140430_01 チェックボックスを付けたいコンタクトフォームの「編集」をクリックして、コンタクトフォームの編集画面を開きます。
フォームの右側にある「タグの作成」ボタンを押して、「承認の確認」を選びます。

承諾の確認タグの設定が出るので、それぞれ設定を行います。 140430_02

名前
好きな英数字を入力します。ここに入れた文字列がinputのnameになります。
id(オプション)
好きな英数字を入力します。id名になります。入れなくてもOK
class(オプション)
好きな英数字を入力します。class名になります。入れなくてもOK
初期状態でチェックボックスにチェックを入れますか?
最初からチェックが入っている状態にしたいなら、ここにチェックを入れておきます。
チェックボックスを反転させますか?
デフォルトでは、「チェックをしたら」承諾済みということになりますが、逆に「チェックを外したら」承諾済みということにしたいなら、ここにチェックを入れておきます。

特にこだわりがなければ、何も弄らなくてもOKです。

140430_03 作成したタグは、好きな位置(送信ボタン上など)にペーストします。
[acceptance]タグだけでは、チェックボックスだけが表示されることになってしまうので、続けて、「メッセージの内容はこれでよろしいでしょうか?よろしければチェックを付けて送信して下さい」などの、メッセージを書き添えましょう。

140430_04 保存!

表示を確認してみましょう

さて、貼り付けたタグはどんな表示になったでしょうか

140430_05 メッセージ本文の下に、ちゃんとチェックボックスとテキストが表示されましたね。
試しに、チェックを入れない状態で送信してみると…

140430_06 ちゃんとエラーが出ました!
これで、チェックボックスにチェックを入れないと、送信することができないようになりました。
でもなんだか、メッセージが堅い気がします。

エラーメッセージを変える

それでは、エラーメッセージをちょっと優しくしましょう。

140430_07 コンタクトフォームの編集ページに戻って、下の方を見て下さい。
メッセージの設定の中に、「#承諾が必要な項目が承諾されていない」場合の設定項目があります。

140430_08 もし、メッセージ設定自体が表示されない場合は、画面上部の表示オプションで、「メッセージ」のところにチェックして下さい。

140430_09 メッセージを、わかりやすいように書き変えます。
今回は、「チェックボックスが未入力です。注意書きをご確認の上、同意して送信して下さい。」としました。

140430_04 保存!

140430_10 念のためもう一度、エラーを出して確認してみましょう。
ちゃんと書き変わりましたね!これで作業は完了です。

エラー確認の時に注意すること

エラーメッセージがちゃんと出るかどうか確認した時、別のメッセージが表示されることがあります。 これは、必須入力項目が空欄である、などの他のエラーがある場合、そちらが優先して表示されるためです。

「承諾の確認」のエラーメッセージを確認したい場合は、他の項目にエラーが出ないように入力してから、試して下さい!