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

Wordpressに簡単にお問い合わせフォームを設置するプラグイン「Contact form 7」ですが、確認画面がなかったり、入力途中で誤送信してしまう可能性があったり、とちょっとした不都合があります。
それらの問題を、チェックボックスをつけるだけで、予防してしまいましょう!
チェックボックスをつけるとどうなるの?
Contact form7にチェックボックスをつけるメリットは、主に3つあります。- スパム対策
- メール送信時に確認画面が出ないことについての注意喚起
- 入力途中でのうっかり誤送信を予防
特に難しい設定も必要なく、これだけのメリットがありますので、試してみて損はないですね。
そのへんの細かいお話は、こちらの記事がすごく丁寧でわかりやすかったです! 意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント
上の記事では、[checkbox*]を使った方法を紹介しているので、このブログでは[acceptance]を使ったやり方をご説明します。
「承諾の確認」タグを作成する
チェックボックスを付けたいコンタクトフォームの「編集」をクリックして、コンタクトフォームの編集画面を開きます。
フォームの右側にある「タグの作成」ボタンを押して、「承認の確認」を選びます。
承諾の確認タグの設定が出るので、それぞれ設定を行います。
- 名前
- 好きな英数字を入力します。ここに入れた文字列がinputのnameになります。
- id(オプション)
- 好きな英数字を入力します。id名になります。入れなくてもOK
- class(オプション)
- 好きな英数字を入力します。class名になります。入れなくてもOK
- 初期状態でチェックボックスにチェックを入れますか?
- 最初からチェックが入っている状態にしたいなら、ここにチェックを入れておきます。
- チェックボックスを反転させますか?
- デフォルトでは、「チェックをしたら」承諾済みということになりますが、逆に「チェックを外したら」承諾済みということにしたいなら、ここにチェックを入れておきます。
特にこだわりがなければ、何も弄らなくてもOKです。
作成したタグは、好きな位置(送信ボタン上など)にペーストします。
[acceptance]タグだけでは、チェックボックスだけが表示されることになってしまうので、続けて、「メッセージの内容はこれでよろしいでしょうか?よろしければチェックを付けて送信して下さい」などの、メッセージを書き添えましょう。
保存!
表示を確認してみましょう
さて、貼り付けたタグはどんな表示になったでしょうか
メッセージ本文の下に、ちゃんとチェックボックスとテキストが表示されましたね。
試しに、チェックを入れない状態で送信してみると…
ちゃんとエラーが出ました!
これで、チェックボックスにチェックを入れないと、送信することができないようになりました。
でもなんだか、メッセージが堅い気がします。
エラーメッセージを変える
それでは、エラーメッセージをちょっと優しくしましょう。
コンタクトフォームの編集ページに戻って、下の方を見て下さい。
メッセージの設定の中に、「#承諾が必要な項目が承諾されていない」場合の設定項目があります。
もし、メッセージ設定自体が表示されない場合は、画面上部の表示オプションで、「メッセージ」のところにチェックして下さい。
メッセージを、わかりやすいように書き変えます。
今回は、「チェックボックスが未入力です。注意書きをご確認の上、同意して送信して下さい。」としました。
保存!
念のためもう一度、エラーを出して確認してみましょう。
ちゃんと書き変わりましたね!これで作業は完了です。
エラー確認の時に注意すること
エラーメッセージがちゃんと出るかどうか確認した時、別のメッセージが表示されることがあります。 これは、必須入力項目が空欄である、などの他のエラーがある場合、そちらが優先して表示されるためです。
「承諾の確認」のエラーメッセージを確認したい場合は、他の項目にエラーが出ないように入力してから、試して下さい!