プラグイン Contact Form 7に確認画面を表示させる。簡単なスパムメール対策も合わせて設定

2019年6月13日

レンタルサーバー　プラグインContact Form 7に確認画面を追加する　スパムメール対策も合わせてWordPress プラグイン「Contact Form 7」では、簡単にお問い合わせフォームを設置できますが、特に海外からのスパム（迷惑）メールが多いので、ユーザビリティを高めつつスパムペール対策にもなる「チェックボックス」を追加設定しましょう。

また「Contact Form 7」は、初期設定では確認画面がありません。プラグイン「Contact Form 7 add confirm」を追加することで、確認画面を追加設定できますので、合わせて解説します。

このページで設定すること

  1. お問い合わせフォームにチェックボックスを追加する
  2. 確認画面を追加する

１：お問い合わせフォームにチェックボックスを追加する

フォーム初期画面

「Contact Form 7」を設定して、初期設定のままのフォームを表示します。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　初期お問い合わせ画面

フォームにチェックボックスを追加し、チェックしないと送信できないようにすることで、特に海外からのスパムメールを防げる確率が高まります。それでは早速、設定を進めましょう。

チェックボックス追加設定

WordPress管理画面の「お問い合わせ」→「コンタクトフォームの編集」画面を開きます。

＊この例では、事前にAkismetのスパムメール対策は設定済みです。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　設定画面を開く

チェックボックスを挿入したい個所にカーソルを移動し、「承諾確認」をクリックします。

この例では、メッセージ本文と送信ボタンの間にチェックボックスを挿入します。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　承諾確認をクリック

チェックボックスを生成するための設定画面が別画面表示されます。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　チェックボックス生成設定画面

フォームに表示したい文章を「同意条件」に入力します。

チェックボックスにチェックを必須にするため、「オプション」に入っているチェックを外し、「タグを挿入」をクリックします。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　チェックボックス生成設定画面　各種設定

チェックボックスを生成するタグが挿入されました。問題なければ「保存」をクリックして設定を完了します。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　チェックボックスタグ挿入確認

フォーム表示確認

それでは実際にお問い合わせフォームを表示して確認しましょう。

チェックボックスと「入力を確認しました」が追加されています。

レンタルサーバー　プラグインContact Form 7にチェックボックスを追加する　チェックボックス表示確認

これで、チェックボックスにチェックを入れない場合は、フォーム送信ができなくなりました。

これですべてのスパムメールを防げるということではなく、ある程度セキュリティの度合いを高めた、ということです。ご注意ください。
もっと詳しく

２：確認画面を追加する

それでは次に、確認画面を追加設定しましょう。プラグイン「Contact Form 7 add confirm」が必要ですので、インストール＆有効化します。

Contact Form 7 add confirm インストール

WordPress管理画面の「プラグイン」→「プラグインを追加」画面を開き、キーワードに「Contact Form 7 add confirm」と入力し、プラグインを表示します。

そして「インストール」「有効化」とクリックし、利用できる状態にします。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirmインストール

確認画面追加設定

WordPress管理画面の「お問い合わせ」→「コンタクトフォームの編集」を開き、該当フォームを確認します。

「確認ボタン」「戻って編集ボタン」が追加になっています。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　ボタン追加確認

確認ボタンを追加したい場所にカーソルを移動し、「確認ボタン」をクリックします。

この例では、送信ボタンの左横にカーソルを移動しています。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　確認ボタンを挿入

確認ボタンに表示される文言を記入し「タグを挿入」をクリックします。

この例では「確認画面」としています。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　ボタン表示名記述

「フォーム」設定画面に確認ボタンのタグが挿入されました。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　確認ボタンタグ挿入

それでは次に「戻って編集ボタン」を挿入します。

挿入したい個所にカーソルを移動し、「戻って編集ボタン」をクリックします。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　戻って編集ボタン挿入

戻って編集ボタンに表示される文言を記述します。この例では、「戻る」と入力し「タグを挿入」をクリックします。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　戻って編集ボタンラベル記述

戻って編集ボタンタグが挿入されました。設定はこれで完了です。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　戻って編集ボタンタグ挿入確認

フォーム表示・動作確認

お問い合わせフォームを表示して確認します。

ボタン名が、「送信」から「確認画面」に変わっていることを確認できます。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　フォーム表示確認

それでは動作確認を行います。空欄に適宜、入力して「確認画面」をクリックします。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　フォーム送信テスト

分かりにくいのですが、こちらが確認画面です。

内容を変更したい場合は「戻る」をクリックして修正、問題ない場合「送信」をクリックしてください。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　フォーム送信確認画面

送信が無事に完了すると画面のような表示になります。

レンタルサーバー　プラグインContact Form 7 Contact Form 7 add confirm　フォーム送信完了

確認画面の背景色はテンプレートによって異なります。背景色やボタンのカスタマイズは個別に行う必要がありますので、検索エンジンでカスタマイズ情報を探しましょう
注目です

まとめ

Contact Form 7は、簡単に問い合わせフォームが設置できる半面、初期設定では機能が少なく、またスパムメールの対象になるという面もあります。

Contact Form 7を利用する場合はこの2つに留意して、機能とセキュリティの向上を合わせて実施するように気をつけて運用してください。

記事作成者プロフィール

佃　直毅
佃　直毅ITサポート/コンサルティング/コンテンツプロデュース
株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
GAIQ(Googleアナリティクス個人認定資格)
おすすめ情報サイト「マイベスト」レンタルサーバー・ドメイン監修

【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信（ストリーミングサーバー）レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証マザーズ上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。

当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやECサービスの評価をし、これから始めたい・切り替えたい方の立場に立った記事・評価・比較情報をお届けします。

【趣味】プロ野球/MLBなどスポーツ、そして映画・音楽好き（主に洋楽）。