メール設定とお問い合わせフォームの設置!

第 8 回のテーマは「メールの設定とお問い合わせフォームの設置」です。

唯一の外部からの連絡手段になる、大切な設定項目です。これがなければ、誰も連絡を取れなくなってしまいます

でも外部からの入口を作るという事は、当然そこがスパム迷惑メール)などの侵入口になってしまう恐れがあります。

なので同時にセキュリティ対策もしておきましょう。

独自ドメインのメールアドレスを作成

エックスサーバーサーバーパネルにログインします。

左下にある「設定対象ドメイン」で独自ドメインを選び「設定する」を押します。

メニュー「メール」→「メールアカウント設定」→「メールアカウントの追加」タブを押して各項目を入力していきます。

メールアカウント」が独自ドメインのメールアドレス(お問い合わせフォームにも使用)になります。「容量」は初期値で良いと思います。「コメント」は空欄です。

入力が終わったら、「確認画面へ進む」を押して、「確定」させていきます。

独自ドメインを Gmail で使う設定

Gmail の特徴

  • Google のサービスである
  • 強力な迷惑メールフィルター
  • セキュリティが高い
  • メールの検索機能が高性能
  • スマホ・タブレットの Gmail アプリを使って、メールの送受信ができる
  • データがクラウドに保存されている
  • 無料

以上のようなポイントから、Gmail をおすすめします

仕組みは、受信メールの場合、まずメールはサーバーで受信してから Gmail で受信する(自分に届く)

送信メールの場合、メールは Gmail からサーバーを経由して相手に届く。という流れです。

サーバーと Gmail の 2 つを経由するため届くのに多少のタイムラグ(数分ぐらい)が生じます。

Google アカウントに Gmail を追加する

Gmail の追加( Google 公式サイトから手順に従い Gmail を追加しログインします。

ここからはエックスサーバー公式マニュアル Gmail アカウントの設定方法を参考に設定をしていきます。

Gmail にログインして、右上の「⚙(歯車)マーク」→「設定」→「アカウントとインポート」タブを押します。

受信アカウントの追加と設定( POP 設定)

アカウントとインポート」タブの「他のアカウントでメールを確認」にある「メールアカウントを追加する」を押します。

追加するメールアドレスを入力してください」と出るので、エックスサーバーで作成した独自ドメインのメールアドレスを入力して「次へ」を押します。

メールアカウントの追加」で「他のアカウントからメールを読み込む( POP3 )」を選び「次へ」を押します。

ユーザー名」はメールアドレスと同じで OK です。「パスワード」はエックスサーバーでメールアドレスを作成した時のパスワードです。

POP サーバー」はエックスサーバーでの設定完了メール記載の「メールサーバー」を入力します。

もしくは、エックスサーバーのサーバーパネルメールアカウント設定メールソフト設定」タブにある「受信メール( POP )サーバー」を入力。( sv〜.xserver.jp というもの)

ポート」は SSL を使用するので995 」です。

取得したメッセージのコピーをサーバーに残す」は他のメールソフトや PC、スマホ、タブレットでも受信できるようにするならチェックを入れます

メールの取得にセキュリティで保護された接続( SSL )を使用する」にチェックを入れて、「アカウントを追加」を押します。

メールアカウントを追加しました」と表示されたら、受信の設定は完了です。

はい。としてメールを送信できるようにします。にチェックして「次へ」を押すと、そのまま送信アカウントの設定に進みます。

送信アカウントの追加と設定( SMTP 設定)

後で行う場合は、Gmail の設定「アカウントとインポート」タブの「名前」にある「他のメールアドレスを追加」で送信アカウントの設定ができます。

自分のメールアドレスを追加」の「名前」は送信者の名前として表示されます。(自分はブログ名です)

メールアドレス」は作成したメールアドレスで、「エイリアスとして扱います」はチェックを入れます。Gmail の仕様変更なのか、チェックを外すとエラーになり送信できなくなりました。

SMTP サーバー」は先ほど POP サーバーで入力した時と同じように(同じところ)確認して入力します。おそらく POP サーバーと同じだと思います

ポート」は SSL を使用するので465 」です。「ユーザー名」と「パスワード」は受信アカウント設定時と同じです

SSL を使用したセキュリティで保護された接続(推奨)」にチェックを入れアカウントを追加」を押します。

Gmail の受信トレイに確認メールが届くので、メール記載の「確認コード」を入力するか、「リンク」をクリックすると認証完了です。「確認」を押します。

独自ドメインのアドレスを標準設定にする

設定が完了すると「設定」→「アカウントとインポート」タブの「名前」のところに、「今作った送信アカウント」が出来ているはずです。

これをデフォルト標準設定、初期設定)にします。「〜@gmail 」ではない独自ドメインのアドレスの右横にある「デフォルトに設定」を押します。

すぐ下にある「デフォルトの返信モードを選択」はメールアドレスが複数あって使い分けたい人は、「メールを受信したアドレスから返信する」が便利です。

デフォルトにしたアドレスだけで運用したい人は、「常にデフォルトのアドレスから返信する」が便利です。一応、返信時に変更することもできます

メール新規作成の「新規メッセージ」で「 From 」を押すと、どのアドレスで送信するか選べます

返信」の場合は、受信メールから返信を押すと下書きを保存しました」と出るので、「下書き」を開き「送信先のアドレス」を押すと、「 From 」が出るので、そこを押せば選べます。

Gmail の受信メールなかなか届かない場合は更新(サーバーに問い合わせ)」を押してみましょう。

お問い合わせ「 Contact Form 7 」の設置

それではメールアドレスの準備が整ったので、お問い合わせフォームの設置に入ります。

まずは WordPressメニュー「プラグイン」→「新規追加」で「 Contact Form 7 」を検索し、「今すぐインストール」して「有効化」します。

「フォーム」タブの設定

WordPressメニュー「お問い合わせ」→「新規追加」or「コンタクトフォーム」ですでに作成されているフォームがあれば、そこの「編集」を押します。

コンタクトフォームのタイトル(名前)を入力。表示されるものではないのでわかりやすい名前で OK です

基本的にこのままですぐ使えますが、参考までに自分の設定(お問い合わせフォームの形)を書いておきます。

<label> お名前(必須)」の上に文言を付け加えています。コードを使わずそのまま文字入力すれば良いです。

「お名前(必須)」の入力欄にプレースホルダー(仮入力情報、うっすら入った文字で説明を書く)として「ハンドルネームで OK です。」と入れています。

これは [text* your-name placeholder "ハンドルネームで OK です。"] </label> と書き換えます。

承認確認(必須)の「プライバシーポリシーと免責事項に同意する。」は「メッセージ本文」と「送信」の間に、「承認確認(必須)」と文字入力します。

改行して上にある承認確認」を押し、「同意条件」に「プライバシーポリシーと免責事項に同意する。」と入れ「オプション」の「チェックボックスを任意選択にする」のチェックは外し、「タグを挿入」を押します。

「メール」タブの設定

ここは「お問い合わせ」があった時自分への連絡メールの設定ができます

送信先」を「独自ドメインのメールアドレス」にします。「送信先」と「送信元」はドメイン(@以降の文字)が一致していないとエラーになる事があるので、同じドメインにします

下にある「メール(2)」はチェックを入れると、相手に送る「自動返信メール」の設定ができます。

追加ヘッダー」は返信してもらうアドレスを指定したい場合はそのアドレスを入力します。特になければ削除しても OK です。

メッセージ」タブと「その他の設定」タブはそのままで良いと思います。

全ての設定が完了したら、忘れずに「保存」を押します。

使い方(表示方法)

メニュー「お問い合わせ」→「コンタクトフォーム」→作成したフォームの「編集」を押して、上部にある「ショートコードをコピーします

次に、このコンタクトフォームを表示するページを作成します。

メニュー「固定ページ」→「新規追加」で「タイトル」に表示させたい名称を入れ、「パーマリンク」をアルファベットで入力

本文のところに、先ほどコピーした「ショートコード」をペースト(貼り付け)します。右の「公開」を押せば完了です。

動作確認として、実際に「お問い合わせフォーム」からメールがちゃんと届くか、そしてそれが自分にちゃんと連絡されるかを確認しておくと良いと思います。

メッセージ保存「 Flamingo 」の導入

Contact Form 7 」は送信されたメッセージを保存しません

何かの時のためにお問い合わせメッセージ(内容)を保存しておきたいなら、メッセージ保存プラグイン「 Flamingo 」を入れておきましょう。

Contact Form 7 」と「 Flamingo 」は開発者が同じなので、安心感があります。

Flamingo 」はインストールして「有効化」すれば OK です。設定画面はありません。

ただ、「 Flamingo 」を「有効化している間だけのメッセージしか保存されないので、そこだけは注意です。「 Contact Form 7 」の設置と同時が良いと思います。

保存された「お問い合わせ」はメニュー「 Flamingo 」→「受信メッセージ」で確認できます。「アドレス帳」は送信されたメールアドレスが自動で追加されていきます

セキュリティ対策「 reCAPTCHA v3 」の設置

お問い合わせフォームを設置すると、そこを侵入口として、様々な悪意のあるプログラムの攻撃を受ける可能性があります。

携帯電話でもメールアドレスを作っただけで、誰にも教えていなくても、迷惑メールが来るようなものです。

こういったスパムメール(大量の迷惑メール)などの攻撃を受けると、大事なメールが埋もれてしまったりサーバーに負担が掛かったり大変迷惑です。

そこでスパムなどからサイトを守るセキュリティ対策として、Google が提供しているサービスreCAPTCHA v3 」を設置します。

これは不正ログインハッキング(正しくはクラッキング違法なアクセスデータの改ざん破壊など)も防いでくれるのでWordPressログイン画面にも設置しています

設定前の準備と注意点

まず導入する前にSiteGuard 」プラグインの「画像認証」設定を「 OFF 」にしておきます。( reCAPTCHA v3 の機能と干渉してしまう恐れがあるため)

メニュー「 SiteGuard 」→「画像認証」に行き「 OFF 」にして、「変更を保存」を押します。

導入する上での注意点として、「 reCAPTCHA v3 」は利用規約(英文)に「 reCAPTCHA 」を利用していることをサイト訪問者に明確に示す必要がある」となっています。

なので自分は「プライバシーポリシー」に「 reCAPTCHA 」の項目を作り記載しています。良かったら参考にしてみて下さい。(コピペも OK です)

導入は、ただ「 reCAPTCHA v3 」を入れるだけなら、プラグインがなくても良いのですが、それだと全ページの右下に常に「 reCAPTCHA のロゴマーク」が表示されてしまいます。

すると「トップに戻るボタン(右下にある、押すと記事の一番上まで戻る)」と重なり見にくいので(スマホでは特に)自分はプラグインも入れています。

登録手順

メニュー「プラグイン」→「新規追加」→「 Invisible reCaptcha for WordPress 」と検索し「今すぐインストール」→「有効化

Google reCAPTCHA 公式サイトで右上の「 Admin console 」を押し、Google にログインします。

Register a new site 」というページが開くので、項目を埋めていきます。

Label 」は管理画面に表示される名前です。自分はサイト名です。「 Choose the type of reCAPTCHA 」は「 reCAPTCHA v3 」を選びます。

Domains 」は利用するサイトのドメイン(「http(s)://」は不要。自分なら zen-gaku.jp )を入力します。

Accept the reCAPTCHA Terms of Service(利用規約に同意する)」にチェックを入れます

Send alerts to owners 」はチェックを入れておくと、何かあった時にアラート(警報)で知らせてくれます

入力が終わったら「 Register(登録)」を押します。

すると「 Site key 」と「 Secret key 」という「 2 つのキーコード」が表示されます。

これを、先ほどインストールしたプラグインに貼り付けるので、このままページを残して置くか、メモ帳などにコピーしておきましょう。

もし、忘れてしまった場合はreCAPTCHA 管理画面から Google にログインして、右上の「⚙(歯車)マーク、設定」を押し、「 reCAPTCHA のキー」を押すと 2 つのキーコードが表示されます。

「 Invisible reCaptcha for WordPress 」の設定

メニュー「設定」→「 Invisible reCaptcha 」を押して、設定画面に入ります。

Your Site Key 」と「 Your Secret Key 」に先ほど取得した「 Site Key 」と「 Secret Key 」を入力(貼り付け)します。

Language 」はロゴマークに表示される言語なので「 Japanese(日本語)」にします。

Badge Position 」はロゴマークの表示位置です。「 Inline(入力フォームの近くに表示)」が一番邪魔にならないと思います。

以上が完了したら、忘れずに「変更を保存」を押します。

続いて、左にあるWordPress 」タブを押します。ここでは保護する項目を決めます。

Enable Login Form Protection 」はログインフォームの保護。「 Enable Registration Form Protection 」は登録フォームの保護

Enable Comments Form Protection 」はコメントフォームの保護。「 Enable Forgot Password Form Protection 」はパスワードを忘れた時のフォームの保護

基本的に全てチェックを入れて良いと思います。忘れず「変更を保存」を押します。

そして本命お問い合わせフォームに「 reCAPTCHA v3 」を設置します。

左にあるContact Forms 」タブを押します。「 Enable Protection for Contact Form 7にチェックを入れて、「変更を保存」を押せば完了です。

あとがき

以上で、メールの設定とお問い合わせフォームの設置、それに伴うセキュリティ対策の完了です。

お問い合わせ(メール)というのは、スパムの被害を受けやすいと言われますし、それが原因でお問い合わせ」を閉鎖した人もいるみたいです。

なので緊張感を持って、自分なりに全力で調べました。その結果がここに記した作業になります。

この作業工程が、何かのお役に立てたら幸いです。

最後までお読み頂きまして、誠にありがとうございました。