前回記事(初期プラグイン設定3回目)では基本的なセキュリティ対策をとりました。
今回は最後のステップ、 WPForms（無料版でOK /正式名称：Contact Form by WPForms） でお問い合わせフォームを設定していきます。
お問い合わせフォームの設置方法
（独自ドメインメール取得・自動返信メール設定を含む）
導入マップ
今回の位置づけはこちら
今回使うプラグイン
- WPForms
- ドラッグ & ドロップの簡単操作でお問い合わせフォームを設定
- WP Mail SMTP
- お問い合わせフォームからの通知メールが確実に届くようにする
ブログを始めたばかりの方にとって、「お問い合わせフォームって本当に必要？」と思うかもしれません。
正直、日常的に問い合わせが来ることは少ないかもしれませんが、設置しておくこと自体に大きな意味があります。
- 信頼性アップ
- フォームがあるだけで「運営者がきちんと存在している」という安心感
- 案件獲得のチャンス
- 広告主や企業からの連絡窓口として使われることも多い
- 安全性の確保
- メールアドレスを公開せずにやり取りができる
- Google AdSenseを将来的に申請するなら ほぼ必須
- 広告の一種。個人的には今は使用していないが、ブログ初心者が「月に数千円～数万円程度の収益を狙う」なら選択肢の１つになり得る
では、以下の流れで順番にご紹介していきます。
今回もキャプチャ画像たっぷりで
WPForms の導入
WPFormsの特徴（できること）
まず大枠を押さえましょう。
こんなイメージを持っておけばOKです。
WPForms の概要
- ドラッグ＆ドロップで簡単にフォーム作成
- コード不要で、初心者でも直感的に問い合わせフォームを作れる
- 豊富なテンプレート
- すぐ使える雛形あり
- Google reCAPTCHAと連携可能
- スパム対策もOK
- SWELL公式で推奨プラグインとして紹介
- 相性の良さ◎
プラグイン追加（WPForms）
では、実際に導入していきます。
画像に沿って設定すれば、基本的な問い合わせフォームが完成します
（必要に応じ、あとでアレンジもできます）
プラグイン→プラグインを追加
「Contact Form by WPForms」と入力し検索。→今すぐインストール
有効化
まず、テンプレートでざっくりフォームを作成
WPForms→Add New Form
はじめる
「お問い合わせ」と入力し「完了」
「簡単なお問い合わせフォーム」を選び、「テンプレートを使用」
完了
ここでは一旦、「完了」
（あとで調整します）
「お問い合わせ」と入力し「はじめる」
チャレンジを終了する
固定ページを表示
この後 調整が必要ですが、とりあえずは形になりました
ダッシュボードに戻って、「固定ページ」→「お問い合わせ」
スラッグ「お問い合わせ」となっている個所をクリックし「contact」と小文字で入力
（これをしないと、URLが乱れます）
【参考】スラッグの箇所がクリックできない場合
※クリックで開きます
ダッシュボード「設定→パーマリンク」と進みます。
「投稿名」にチェックをつけて「変更を保存」でOK
パーマリンク設定：該当箇所を表示
contactと入力したら、「保存」
詳細設定・テスト
ここからは各種、詳細設定を進めます。
今回の作業でココが一番大変ですが、真似して進めれば 簡単にできると思います
頑張って乗り越えましょう。
スパム対策：「Google ReCAPTCHA」を設定
ここで、スパムメールの対策を行います。
- スパムや自動送信を防ぐ仕組み
- 問い合わせフォームやコメント欄に、ロボットが迷惑メッセージを送らないようにしてくれる
- 人間かロボットかを判別するツール
- 「私はロボットではありません」のチェック(v2)や、最近では見えない形で自動判定してくれるタイプ(v3)もある
- 一長一短あり、好みですが 当ブログではv3を導入
- 無料で使えて WPFormsと簡単に連携可能
- 設定しておくだけで、迷惑メール対策がぐっと強化できる
では、設定に移ります。
Google ReCAPTCHAの公式サイトへアクセス→「使ってみる」
（「使ってみる」をクリックすると無料のreCAPTCHA Essentialsの設定画面に移動します。）
（Essentialsでは月に最大 10,000 件の評価できます。個人のブログ運営であればこれで充分なのでこれでOK）
- ラベル：サイト名を入力（自分がわかればOK）
- reCAPTCHA タイプ：v3
- ドメイン：ドメイン名を入力
（「https://」の部分は入力しない）
入力が終わったら、「送信」
（初めて利用する場合は、「利用条件の同意」や「アラートをオーナーに送信」のチェックボタンがあるかもしれません。その場合はいずれもチェックを入れて「送信」）
サイトキーとシークレットキーが発行されます。
この後すぐに使います。
コピーできるようにページを開いておいてください
ダッシュボードを開き、WPForms → 設定
「CAHTCHA」のタブを開き、「reCAHPTCHA」を選択
タイプは reCAPTCHA v3 を選択。
サイトキー・シークレットキーの欄に先ほど発行したものを貼り付けます。
その他はデフォルトのままでOK。
設定を保存
WPForms → すべてのフォーム → お問い合わせの「編集」
reCAPTCHAを選択し、OK
右上に「reCAPTCHA 有効」と表示されればOKです。
試しにお問い合わせフォームを表示してみます。
右下にreCAPTCHAマークが表示されれば設定が完了です。
フォームを微調整
フィールドの「名前」の箇所をクリック
- ラベル：お名前
- 説明：お問い合わせされる方のお名前をご入力ください。
など、適宜 追記修正してください。
同じ要領で、「コメントまたはメッセージ」となっている個所を「お問い合わせ内容」に修正し、説明文を入れていきます。
通知設定【独自ドメインメールを取得し「WP Mail SMTP」も設定】
通知設定では フォーム入力者や管理者(自分)に自動で送られる通知メールの設定ができます
ココは少しわかりにくいかもしれないので、先に完成形を載せます。
用語の意味合いも記載します。
確認しながら設定してみてください
完成形
用語の意味 & 設定方法
- 送信先メールアドレス：フォーム送信があったときに「誰に通知メールを送るか」を指定
- 初心者のつまずきポイント：「自分に送るのか？相手に送るのか？」→ ここは“通知を受け取る人”を指定する欄
「自分（管理者）のメールアドレス」と「サイト訪問者が入力したメールアドレス（Field #2 メールアドレス など）」の両方を指定
【参考】「Field #2 メールアドレス」＝ {field_id=”2″} の正体
※クリックで開きます
【参考】「管理者のメールアドレス」＝{admin_email} の正体
※クリックで開きます
ダッシュボード「設定」→「一般設定」から確認できます。
- メール件名：通知メールのタイトル
お問い合わせありがとうございます
- フォーム名：どのフォームから送信されたかを自動で反映可能
（複数のフォームを運営している場合、ここで仕分けできる）
サイトに1つのみの場合は、サイト名でOK
- 送信元メールアドレス：「通知メールが誰から届いたように見えるか」を指定
- 初心者の誤解ポイント：「ここに相手のメールアドレスを入れる？」→ 違います！
- ここは独自ドメインのメールアドレスを使うのが基本
GmailやYahooメールなどのフリーメールを使うと「なりすまし」と判断され、迷惑メール扱いになりやすいです。
（問い合わせした方に通知メールが届かない原因に繋がります）
独自ドメインメールを使う重要
（例：〇〇〇@abcd.com）
（※独自ドメインメールアドレスの取得方法：後述）
独自ドメインと異なる
メールアドレスを入れると
このような表示が出るはず
そこで WP Mail SMTPをというプラグインを後ほどインストールします。
（これにより通知メールがSMTPサーバーを経由して送信され、しっかりと届くようになります。)
（なお、画像の箇所にあるテキストリンクからインストールすると英語版になってしまうはずです。ダッシュボード「プラグイン」→「プラグインを追加」からインストール推奨）
メール送信に特化したサーバー
→そのため、「迷惑メール扱い」されません
まずは独自ドメインメールを取得します。
その後でWP Mail SMTPを設定へ。
【簡単】「独自ドメインメールアドレス」の取得手順
（ConoHa Wingの場合)
※クリックで開きます
ConoHa Wing（メールアドレス作成方法）に手順は書かれていますが、以下の通りです。（簡単）
上部メニュー「WING」を選択したうえで
「メール管理」→「メール設定」→「+メールアドレス」
「メールアドレスにしたい文字列」と「パスワード」を入力し、保存
（ここで設定するパスワードは、後ほどWP Mail SMTPの設定で入力が必要となります）
これで「自分のドメイン」のメールアドレスが取得できました。
WP Mail SMTP のインストール & 設定 重要
※クリックで開きます
プラグイン→プラグインを追加→「WP Mail SMTP」と入力→「今すぐインストール」
有効化
（このセットアップウィザードはわかりづらいので、）「ダッシュボードに戻る」
WP Mail SMTP→設定→一般
- 送信元メールアドレス：（先ほど取得した）自分のサイトのドメインメール
- 送信元メールアドレスを強制使用：チェックを入れる
（↓続きます）
- 送信元メールアドレス：（先ほど取得した）独自ドメインメール
- 送信者名：サイト名などでOK
- 返信パス：オン
- メーラー：その他のSMTP
- SMTPホスト：mail〇〇.conoha.ne.jp
【ConoHa Wing管理画面（「メール管理→メール設定→メールアドレス詳細」から「SMTPサーバー」を確認】
SMTPホストの確認方法はこんな感じ
- 暗号化：TLS
(TLSは暗号化技術の一種。SSLの後継規格で現在はTLSが標準。ConoHa WingはTLS対応） - SMTP ポート：587
- 認証：オン
- SMTP ユーザー名：（先ほど取得した）独自ドメインメール
- SMTP パスワード：独自ドメインメールを設定した際のパスワード
最後に「設定を保存」を押しせばWP Mail SMTPの設定は完了
- Reply-To（返信先）：管理者が通知メールに返信したときに、どこへ届くかを指定する欄
フォーム入力者のメールアドレスフィールドを指定
（例：Field #2 メールアドレス を選んでおけば、問い合わせに返信するだけで相手に届く）
- メールメッセージ：通知メールの本文に何を表示するかを決める欄
お問い合わせありがとうございます。（本メールは自動配信メールです。）確認後、改めてご連絡させていただきます。{all_fields}
（補足：{all_fields} を入れると、送信者が入力した内容がすべて反映されるので便利）
最後に右上にある「新規通知を追加」を押す。
ちなみに…先ほどの表示はこのように変わるはずです。
独自ドメインメール & WP Mail SMTP
設定前
独自ドメインメール & WP Mail SMTP
設定後
お疲れ様でした！
確認設定
確認設定では 送信完了ページに表示される内容を設定できます
設定→確認→確認メッセージの欄へ
お問い合わせありがとうございます。追ってご連絡させていただきます。
みたいな感じで入力したら、「保存」をクリック
テスト送信してみる
作成した固定ページのURL（〇〇.com/contact）にアクセスして、表示を確認します。
各入力フォームに適当に入力し、「送信」
（メールアドレスはご自身の普段よく使うメール等でいいと思います。）
送信後、このような表示（確認設定で登録した内容）が表示されればOK。
次は、自動配信メールが届くか確認します。
問い合わせフォームにテスト入力したメールアドレスの受信トレイにいき、メールが届いているか確認します。
先ほど取得した独自ドメインメールから届いていればOK
設定した内容が反映されているので、これでOK
サイトに表示させる
最後にサイトの下部に問い合わせフォーム(作成した固定ページ)を表示させます。
フッターメニューを作成
「外観」→「メニュー]
メニュー名に「フッター」と入力し、固定ページ「お問い合わせ」にチェックをつけ、「メニューに追加」
メニュー構造に「お問い合わせ（固定ページ）」が追加されたのを確認し、メニュー設定の「フッター」にチェックを入れ「メニューを保存」
これで完了です
「ライブプレビューで管理」を押すとプレビューを確認できます。
これで全て完了です
最後に
お疲れ様でした！
これで、全４回にわたる「初期設定プラグイン」の導入が全て完了しました。
とりあえず ここまでやれば、記事を書き進めていけばよいかと思います。
今後、適宜 必要に応じプラグインを追加してください。
（とはいえ プラグインの入れすぎは不具合の原因に。必要最低限にとどめるのがオススメ）
今後、本格的にブログで稼いでいくなら、バックアップ プラグイン(BackWPupなど)は入れたらよいとは思います。別途、機会があれば記事にします。
まずは大きなステップを突破！
（勝手にそう思ってます）
本当にここまでお疲れ様でした。
ここからは、コンテンツ作り（戦略策定・記事執筆）に時間を割きましょう！
今回はこのあたりで。
