当記事ではContact Form 7 で設置したお問い合わせフォームに、確認チェックボックスや確認画面を追加する方法を解説します。
Contact Form 7は非常に簡単にメールフォームを設置することが可能なプラグインですが、デフォルトの状態でそのまま使っていませんか？
このままだと、送信前に確認を促す機能がついていないため、入力途中で誤送信してしまったなど、ちょっとした不都合が発生することがあります。
サイト訪問者からの反応を上げるためにも、お問い合わせフォームに確認機能を追加して、ユーザーに優しいメールフォームにカスタマイズしていきましょう。
Contact Form 7 のデフォルトのメールフォームには確認画面がない！
Contact Form 7 を使えばシンプルで簡単にメールフォームを設置することができますが、デフォルトの状態だと確認画面がありません。
お名前欄やメールアドレス欄のように「必須」と設定のある入力項目は、入力がされていないと、
「入力に不備があります。確認してもう一度送信してください。」
というメッセージが表示され送信されないようになっていますが、それ以外の入力項目には制限がなく、送信ボタンが押されるとすぐにメッセージが送信されます。
日本人の感覚的には、サイトのお問い合わせフォームから自分が何かアクションを起こす際には、送信される前に確認画面が出てくるだろうと想定されていることが一般的ですので、確認画面が出ずにすぐに送信されてしまうと、やや不親切な印象を受けることがあるようです。
また、入力途中でうっかり誤送信してしまう可能性もあり、「途中まで入力していたのにまた書きなおさなきゃいけない！」とユーザーをイライラさせてしまうこともあるかもしれません。
さらに、このようなユーザビリティの観点の他にもデメリットがあります。
お問い合わせフォームを設置するとスパムメールが大量に届くようになることがありますが、これは自動投稿プログラムを使用して送信されているためです。
つまり、確認画面がないことは非常に簡単に送信できてしまう環境にあるということなので、スパムメールの格好の餌食となるわけですね。
よって、送信前に何かしらのクッションを入れることでスパムメールを抑止する必要がある、ということになります。
＜メールフォームに確認チェックボックスや確認画面を加えるメリット＞
- ユーザーに安心感を持ってもらう
- ユーザーの誤送信を防止する
- スパムメール対策
以上の点から、デフォルトフォームのままではなく、Contat Form 7 に確認チェックボックスや確認画面を実装するカスタマイズを行っていくのがいいでしょう。
誤送信防止を簡単に実装する確認チェックボックス
まずは、プラグインを使わずにユーザーに確認を促すチェックボックスを実装する方法を解説します。
この方法では、確認画面は使用しませんが、ユーザーが入力を終えたあとチェックを入れてもらうことで送信ボタンが有効になるので、誤送信を簡単に防ぐことができます。
1. お問い合わせフォームの編集画面を開く
から、作成したお問い合わせフォームを開きます。
2. フォームタブの「承諾確認」タグを押下
デフォルトフォームの、【メッセージ本文】と【送信】の間に、チェックボックスを作成していくので、ここにカーソルを合わせたあと、「承認確認」タグを選択します。
3. フォームタグ「承諾確認」を生成
承認確認チェックボックスのフォームタグを生成する画面になります。
項目の意味は以下のようになりますが、基本的にな何もいじらなくてOKです。
名前：
任意の名前を入力します。
オプション：
いずれも空欄にする
※このチェックボックスをでデフォルトでチェックされた状態にする
このチェックをONにすると最初からチェックされている状態になり、今回の目的にそぐわなくなるためこのチェックは外してください。
※これの挙動を反対にする
通常は「チェックをしたら承認済み」ということになりますが、このチェックを入れると、「チェクを外したら承認済み」という意味になります。
今回の場合は外してください。
id属性とclass属性
id属性class属性を任意で指定できる。
確認したら、「タグを挿入」を押下するか、ショートコードをコピーします。
4. 承諾確認タグの後にメッセージを入れる
承認確認タグが挿入されると、チェックボックスが作成されますが、このままでは画面にチェックボックスだけが表示されている状態なので、ユーザーに分かりやすく確認を促すメッセージを挿入しましょう。
ユーザーはこのメッセージを見て、チェックを入れたあと、送信ボタンを押せるようになる、という手順になります。
5. コンタクトフォームを保存する
フォームにチェックボックスとメッセージを追加したら、最後に「保存」ボタンをクリック。
「コンタクトフォームが保存されました」というメッセージが表示されれば、完成です。
6. サイトを確認する
最後に、設定がうまく反映されているかサイトを見て確認しましょう。
お問い合わせフォームを開くと、以下のようにチェックボックスと確認を促すメッセージが表示されています。
チェックボックスにチェックが入っていない状態では、「送信」ボタンがグレーアウトされており、クリックができないようになっています。
チェックを入れると・・・
このように、「送信」ボタンが有効になり、送信できるようになります。
以上で確認チェックボックスの設置は完了です。
確認画面への移行はないですが、簡易的に確認ができるようになりユーザーにも優しいですね＾＾
確認画面を追加するContact Form 7 add confirmプラグイン
確認チェックボックスは確認画面への移行はなく、「送信」ボタンは表示されたままになっていますね。
それでも一応ユーザーに確認を促すことができるので、問題はないといえばないですが、スパムメール対策の強度をもっと上げたい場合は、Contact Form 7 add confirmプラグインを使用して確認画面を追加することができます。
このプラグインを使えば、フォームタブのタグ一覧に「確認ボタン」と「戻って編集ボタン」の機能が追加され、「送信」ボタンを「確認」ボタンに変更することができるので、自動プログラムによるスパムメールへのブロック力がより強力になります。
設定方法と使い方
1. Contact Form 7 add confirmをインストール
ダッシュボードメニューのプラグインから「Contact Form 7 add confirm」をインストールします。
Ref: WordPressプラグインをインストールする3つの方法と有効化
2. お問い合わせフォームを開く
次に、ダッシュボードメニューのお問い合わせから、コンタクトフォームを開いてください。
すると、フォームタブの中に「確認ボタン」と「戻って編集」の項目が追加されています。
フォームの構成は、
【メッセージ本文】
【確認ボタン】
【送信ボタン】
【戻って編集】
となるようにしたいので、それぞれのタグを該当の箇所に挿入していくようにします。
3. 「確認ボタン」と「戻って編集」を設置する
それぞれのタグを選択すると下記のような画面になります。
確認ボタン
戻って編集
それぞれ、ボタンに表示されるラベル名を好きな言葉に変更し「タグを挿入」をクリックして、フォームに配置します。
4. タグを確認してフォームを保存する
以下のように、タグが挿入されるので、確認したら最後に「保存」をクリックしてください。
以上で、確認画面の設置は完了です。
5. サイトを確認する
それでは、早速サイトを確認してみましょう。
お問い合わせフォームを開くと、以下のように画面が変更されています。
「送信」ボタンが「確認画面へ」というボタンに変更されていますね。
そして、このボタンをクリックすると・・・
このように、メッセージ欄がグレーアウトされ確認画面になりました。
ここで、ユーザーは内容を確認して、「送信」あるいは「修正する」を選択するという手順になりますね。
メッセージを送信するまでにワンクッションあることで、スパムメール対策的にもより強力になっているのがお分かりいただけるでしょう。
よりユーザビリティを高めたい時や、簡易チェックボックスをスパムメールに破られてしまったという場合などには、ぜひこのプラグインを試してみてくださいね。
