WordPressでページ内にフォームを設置して、メールを送信するようにしたい。しかも無料で、、と考えている人も多いはず。大丈夫、できます!
方法は色々とあるが、Gmailを使うのが簡単。Googleさん素晴らしい機能を大量にしかも無料で提供してくれていて本当にありがたい。
また、フォームでメール送信できるようにしたものの、送られてきたメールの上部でデカデカと次のような文言が表示されてしまう場合の対処法にもなります。
このメールにはご注意ください
このメールにはなりすましの可能性があります。メールの送信元があなたのアカウントになっていますが、Gmailでは実際の送信元を確認できませんでした。自分でこのメールを送信したことが確かな場合以外は、リンクをクリックしたり、機密情報を返信したりしないでください。(本当の送信者はあなたのアカウントに実際にアクセスできるわけではないため、パスワードを再設定する必要はありません)。
[迷惑メールとして報告] [問題ない]
実物は以下。

これは、レンタルサーバーを経由してメールを送信する場合などに表示される。昔は表示されなかったが、Googleがセキュリティを強化したことで表示されるようになった。
以下で説明する手順でメールの設定をすれば、この表示も消すことができる。
Gmailサーバーを使う設定手順|前提条件
WordPressのWP Mail SMTPプラグインを使って設定する。以下を前提条件として説明。
- Gmailアカウントを持っている
- フォームは設置済み
フォームは後から設置するのでも問題ない。おすすめプラグインはContact Form7 や WPForms。他にもたくさんあるのでお好みで。
Gmailサーバーは具体的にはGmailのAPIを使って設定をしていく。
WP Mail SMTPプラグインのインストール
メニューのプラグインを選択し「新規追加」をクリック。検索窓に「WP Mail SMTP」と入力。

変な鳥の顔のアイコンが目印。アイコンの胡散臭さとは裏腹に、有効インストール数は2百万以上、レーティングは2,000件を越えていて評価がかなり高い。超優良プラグイン。

右上の「今すぐインストール」をクリックし、「有効化」する。
「Let’s Get Started」と表示されるので、これをクリック。ここでクリックせずに管理画面に戻ったとしても、後から設定できる。

SMTPサーバーでGmailを選択。「Save and Continue」をクリックして次へ。

アラートのダイアログが表示されるが気にせず「I Understand, Continue」をクリック。
ちなみに、GmailのAPIを使って設定をしていくけど、送信できるメールに上限があるよ。超大量にメール送信する場合は他のSMTPを使ってね、という内容。
具体的には、Gmail APIは1日あたりの処理量に10億クオーターユニットという制限を設けている。そして、ドラフトを作成したり、メールを送信するごとにこの指定のクオーターユニットを消費していく。(独自の単位わかりずらい、、)
メール作成で消費するクオーターユニットは10、送信で消費するクオーターユニットは100。超簡略化して1通あたり110クオーターユニットの消費と仮定すれば、約1000万件ぐらいはメールが送信できる(のかな?)。とにかく一般ユーザーはそこまで気にする必要はない。
また、1ユーザーが1秒で使えるクオーターユニットは250なので、1秒間のうちに送信できる量は2通が上限となる。
詳しく知りたい方は、開発者向けGmailのGmail APIページをご参照。

クライアントIDとクライアントシークレットが入力された状態のページが表示される。が、この入力内容は間違っているので、Gmail APIでアカウントを作成し正しいものを入力する必要がある。
その際、Authorized Redirect URIを使うので、このページはこのまま閉じずに残しておく。

Gmail APIの設定
メール送信に必要なクライアントIDとクライアントシークレットを発行するために、Google Cloud PlatformのGmail APIアプリケーションを登録する。以下リンクをクリック。
Chromeでログイン済みであれば、以下のページにリダイレクトされる。利用規約にチェックし、居住国、キャンペーン情報の受け取りをするか選択し、「同意して続行」をクリック。

これでAPIが有効になる「認証情報に進む」をクリック。

この後のAPI設定がなかなか長い。まずは、使用するAPIでGmail APIが選択(デフォルト)されていることを確認し、「ユーザーデータ」にチェックを入れる。
認証情報の作成

アプリ情報で「アプリ名」を入力する。名前はなんでもいい。わかりやすいようにサイト名を入力しておくのがおすすめ。
「ユーザーサポートメール」で対象のGmailアドレスを選択する。アプリのロゴは選択しなくてもどちらでもいい。
「デベロッパーの連絡先情報」にメールアドレスを入力する。
※「ユーザーサポートメール」は送信元サーバーのメールアドレスを選択。「デベロッパーの連絡先情報」は変更情報などが送られてくるため、開発者のメールアドレスを指定する。同じものを指定してもいいが、分けておくとフォーム以外の余計なメールと分離することができる。
「保存して次へ」をクリック。

次にスコープの設定があるが、ここは不要。下にスクロールして「保存して次へ」をクリック。

続いて、OAuthクライアントIDを設定する。ここは重要。
- 「アプリケーションの種類」:ウェブアプリケーションを選択。
- 「名前」:任意の名前を入力。後から変更も可能。
- 「承認済みのリダイレクトURI」:先程、WP Mail SMTPで表示されていたURLをコピペ

「完了」をクリックする。

以上で、WP Mail SMTPの設定に必要なクライアントIDの発行が完了。この情報は後ほど参照できる。「完了」をクリックする。

本番環境に変更する
デフォルトではGmail APIはテストモードになっており機能が制限されているため、公開モードに変更する。(G Suite/Google workplaceの場合は不要)
メニューの「OAuth同意画面」を選択し、「アプリを公開」をクリックする。

本番環境にpushしますか?というダイアログが表示されるので、「確認」をクリック。

以上で、公開ステータスが本番環境になる。

WP Mail SMTPの設定続き
Gmail APIを使う準備が整ったので、先程途中で止まっていた、WP Mail SMTPの設定の続きを行う。
Gmail APIのページで「認証情報」を選択し、先程追加したOAuth2.0クライアントの編集アイコンをクリックする。

クライアントIDとクライアントシークレットが表示されるので、それぞれをコピーして、WP Mail SMTPに貼り付ける。

WP Mail SMTPの設定画面に以下のように貼り付けが完了したら、「Connect to Google」をクリックし、対象のGmailアカウントを選択する。
※スペースが入ったり、文字が足りないとエラーページが表示される。

接続に成功すると、次のように「このアプリはGoogleで確認されていません」というページが表示される。
危険な香りがするが特に問題ない。下部の「詳細」をクリックする。
自分以外のWP Mail SMTPプラグインにGmail APIを使うことを許可する処理になるため、セキュリティ上警告が表示されている。

下に、「womailsmtp.com(安全ではないページ)に移動」が表示されるので、これをクリック。

「wpmailsmtp.comへの権限の付与」が表示されるので、「許可」をクリックする。

もう一度「許可」をクリック。

認証成功のダイアログが表示される。これでWP Mail SMTPプラグインが指定したGmail APIを使えるようになった。

下にスクロールし、メールの送信元として表示するフォーム名を入力する。送信元は設定したメールアドレスになっている。
「Save and Continue」をクリックする。

現在使える機能が表示される。ここも「Save and Continue」をクリック。

WP Mail SMTPからのお知らせを受け取るか聞かれる。不要であれば何も入力せず「Save and Continue」をクリック。

有料版のAPIキーを入力する画面が表示される。ここも何も入力せず「Skip this Step」をクリック。

「テストメールを送信」というボタンがあるのでクリック。

WP Mail SMTPのメールテスト画面に飛ぶ。送信先のメールアドレスを入力し「メールを送信」をクリック。

送信先で指定したメールボックスにテストメールが届けば設定完了。

もちろん届いたメールには、「このメールにはご注意ください。このメールにはなりすましの可能性があります。~」という警告は表示されていない。
以上。これで、Gmailサーバーを使ってメールの送信に成功。お疲れ様でした!