本記事では、ブログ・サイトの信頼性を高めるために必要なお問い合わせを簡単に作成できるプラグインContact Form by WPFormsの設定方法と使い方を画像を用いてわかりやすく解説します。
テリオス(@TERIOS_INFO)が解説させていただきますね。
- Contact Form by WPForms(WPForms Lite)の設定方法と使い方がわかる
Contact Form by WPForms とは?
Contact Form by WPForms は、お問い合わせフォーム(コンタクトフォーム)や申し込みフォームを作成できるWordPressプラグインです。
このうち無料版があって、WPForms Lite という名前で公開されています。
- 雛形(テンプレート)を使用することで簡単に作成できる
- 自動返信メールを設定できる
- サンクスページ(送信完了ページ)を設定できる
- reCAPTCHAでスパムメール(迷惑メール)対策ができる
WPForms Lite の導入
インストール・有効化
プラグインのインストール方法は、下の記事で解説しているので、参考にしてくださいね。
お問い合わせページを作成
WordPress管理画面のサイドバーで、WPForms>新規追加とクリックします。
行きましょう!をクリックします。
赤点線枠内にある「簡単なお問い合わせフォーム」のテンプレートを使用をクリックします。
何回か『完了』ボタンのついたポップアップが表示されることがありますが、そのまま押してかまいません。
下の画面が表示されるので、新規ページ作成をクリックします。
ページタイトルにお問い合わせと入力し、行きましょう!をクリックします。
✕をクリックします。
右側の設定メニューの①URLをクリックし、②「パーマリンク」にcontactと入力して、③公開をクリックします。
これで、お問い合わせページはもう公開されています。以上で、お問い合わせフォーム(コンタクトフォーム)の作成は完了です。
Googleリキャプチャの設定
お問い合わせフォームを公開しただけの状態では、スパムメール(迷惑メール)対策ができていません。
そのため、Googleの reCAPTCHA(リキャプチャ)を利用したスパム対策(ロボット対策)を解説します。
Googleリキャプチャとは
Googleリキャプチャは、ユーザー挙動や画像認証によって、ロボット判定して送信拒否されるサービスです。
Checkbox reCAPTCHA v2 の場合、チェックボックスをクリックすることで、ロボットかどうか判定されます。
画像認証が利用できる場合は、タイル(画像)を選択することで、ロボットか判定されます。
Invisible reCAPTCHA v2 や reCAPTCHA v3 の場合、以下のようなバッジが表示されるだけで、自動的にロボットか判定されます。
Googleリキャプチャに登録
Googleリキャプチャの公式サイトにアクセスします。
以下の画面が表示されたら、v3 管理コンソールをクリックします。
Googleログイン画面が表示された場合は、Googleアカウントでログインしてください。
ラベル(ドメイン名)、reCAPTCHA タイプ(v2 非表示)、ドメイン、同意チェックを設定して送信をクリックします。
「WPForms」では「reCAPTCHA v2 非表示(Invisible reCAPTCHA v2)」を選択するようにしてください。「Checkbox reCAPTCHA v2」は、手動の画像認証でロボットか判定して送信
「Invisible reCAPTCHA v2」は、自動でロボットか判定して、手動の画像認証も可能
「reCAPTCHA v3」は、自動でロボットか判定して、手動の画像認証は不可
「v3」の場合、ロボットと誤判定されてしまうと、本当に問い合わせしたい人も送信不可(足切り)になってしまいます。
サイトキーをコピーとシークレットキーをコピーするか、画面を開いたままにしておきます。
WPForms にリキャプチャを設定
WordPress管理画面のサイドバーで、WPForms>設定とクリックし、CAPTCHAタブをクリックします。
reCAPTCHAをクリックし、タイプでInvisible reCAPTCHA v2を選択し、コピーしておいたサイトキー、シークレットキーを入力して設定を保存をクリックします。
お問い合わせにリキャプチャを設置
WordPress管理画面のサイドバーで、WPForms>すべてのフォームとクリックし、先ほど作成したお問い合わせフォームをクリックします。
reCAPTCHAをクリックします。
下のように表示されるので、OKをクリックします。
右上にreCAPTCHAバッジが表示されるのを確認し、保存をクリックします。
以上で、Google reCAPTCHA の導入は完了です。
お問い合わせの動作確認
お問い合わせページにアクセスして、画面右下に reCAPTCHAバッジ が表示されているか確認します。
テストをしてみましょう。
テスト送信すると、以下のような画面に切り替わります(画面が自動スクロールします)。
テスト送信すると、以下のような受信メールが届きます。(なりすましメールと判定されるのは正常です。)
メールが届かない場合は、「迷惑メール」フォルダに自動的に振り分けられている可能性があります。
以上で、お問い合わせフォーム(コンタクトフォーム)の動作確認(動作検証)は完了です。
お問い合わせのカスタマイズ
WordPress管理画面のサイドバーで、WPForms>すべてのフォームとクリックし、先ほど作成したお問い合わせフォームをクリックします。
フィールド画面が開くので、①フィールド設定タブをクリックし、②「名前」フィールドをクリックして選択し、③フォーマットを[名、姓]から[シンプル]に変更します。
「メール」フィールドをクリックして選択し、ラベルをメールアドレスに変更します。
「コメントまたはメッセージ」フィールドをクリックして選択し、ラベルをメッセージに変更します。
①左アイコンの設定をクリックし、②一般設定画面を開きます。③「フォーム名」をお問い合わせフォームに変更します。
①通知設定画面をクリックし、②「送信先メールアドレス」③「メール件名」④「メールメッセージ」を変更します。
「{field_id=”1″}」は、お問い合わせフォームに入力されたメールアドレスです。「メールアドレスへ送る」設定に「{field_id=”1″}」を追加することで、送信者に自動返信メールを送ることができます。ちなみに、「{admin_email}」はWordPress(ワードプレス)の管理者メールアドレスです。
①確認設定画面をクリックし、②「確認メッセージ」を変更します。③最後に保存をクリックします。
「確認タイプ」を[メッセージ]にすると、送信完了画面に設定したメッセージを表示することができます。「確認タイプ」を[ページを表示]にすると、自分で作成した固定ページに飛ばすことができます。「確認タイプ」を[URLに移動(リダイレクト)]にすると、外部ページにジャンプさせることができます。
以上で、お問い合わせフォーム(コンタクトフォーム)の設定変更は完了です。
再度テスト送信で動作確認をしてみてください。
その他の設定
「WPForms」をインストール・有効化すると、WordPress管理画面の上部にWPFormsの「管理バーメニュー」が追加されます。当サイトでは特に不要と考え、非表示にしています。
WordPress管理画面のサイドバーで、WPForms>設定とクリックし、その他タブをクリックします。
「管理バーメニューを非表示」と「メールの概要を無効化」をチェックONにして設定を保存をクリックします。
以上で、その他の設定変更は完了です。
なりすましメール対策
総括
ブログ・サイトにお問い合わせを配置することで、記事を読んだ読者からのコンタクトが期待できます。
もしかすると、企業からあなたに記事掲載の依頼が直接するかもしれません。
いろいろな可能性が広がるかもしれないお問い合わせを、ぜひ配置してみてください。
本記事が、あなたのお役に立てたのなら幸いです。