本記事のゴール
今回は、これまでで AWS 上に構築してきた WordPress サイトに、お問い合わせフォームを追加していきます。本記事では以下のような問い合わせフォームの実現を解説します。
今回のポイントは、以下の様になります。
- Contact Form 7 プラグインを使ってお問い合わせフォームを作成
- WP Mail SMTP プラグインを使ってお問い合わせフォームに入力された内容をメール送信できるようにする (これをやっていないと「メッセージの送信に失敗しました。後でまたお試しください。」と赤枠表示される)
- Google reCAPTCHA v3 を使って問い合わせフォームをスパムから保護。その際、reCAPTCHA のバッジが画面の邪魔にならないよう、Invisible reCaptcha プラグインを使ってバッジの位置をインラインに設定
今回は reCAPTCHA を使ったスパム対策もご紹介するので、コメント欄の保護等を検討される読者の方々にも有用かと思います。
Contact Form 7 プラグインを導入し問い合わせページを作成
WordPress 上でお問い合わせフォームを作るにあたって、「Contact Form 7」プラグインを使っていきます。Contact Form 7 を選定したのは、本記事執筆時点で有効インストールが 5 百万以上と、実績が多いためです。
早速プラグインをインストールし、有効化していきましょう。
そうすると「プラグインを追加」の画面に遷移しますので、キーワードに「Contact Form 7」を入力し検索、出てきた Contact Form 7 プラグインを「今すぐインストール」していきましょう。
インストールできたら、その後は「今すぐインストール」ボタンが「有効化」に変わりますので、クリックして有効化していきます。
早速こちらのプラグインを使って、お問い合わせページを作成していきます。お問い合わせページの作成は、1. お問い合わせフォームの雛形の作成と、2. フォームの雛形を埋め込んだ固定ページの作成、の 2 ステップに分かれます。
まずはお問い合わせフォームの雛形を作っていきます。メニューに「お問い合わせ」が増えていると思いますので、こちらを選択すると、デフォルトで「コンタクトフォーム 1」ができていますので、こちらをそのまま使っていきます。1 から作るとそれなりに面倒ですし、雛形をベースに考えると編集の要領もわかりますので。
あんまり編集する必要はないかと思うのですが、私は必須の項目は必須と記載してあげた方が親切かなというのと、メッセージ本文が任意になっていてそもそもお問い合わせをするのにメッセージを書かないのってナンセンスだと思いましたので、以下の赤枠のように編集し、「保存」ボタンを押して保存しました。
次に、「お問い合わせ」の固定ページを作成していきます。ブロックエディターの「+」ボタンを押して、「Contact Form 7」を選択します。
そうすると、次のようになりますが、いったんお問い合わせページとしては大丈夫ですので、保存します。
WP Mail SMTP プラグインを導入し WordPress サイトからメール送信可能にする
WordPress 側からお問い合わせフォームに入力された内容をメールで送信可能なようにします。この手順をやっていないと、お問い合わせフォームに内容を入力して送信しようとしても、
このように赤枠で、「メッセージの送信に失敗しました。後でまたお試しください。」と失敗します。
ですので、メール送信できるよう、事前にプラグインで準備していきます。本記事で使うのは、「WP Mail SMTP」というプラグインです。Contact Form 7 と同様に、キーワードで「WP Mail SMTP」と検索し、何やら妙にリアルな鳥 (鳩？笑) のアイコンの、プラグインをインストールしていきます。
そうするとプラグインのセットアップが始まりますので、進めていきます。
本記事ではメールアドレスに Gmail を使う場合を説明していきます。
すると何やら不穏なメッセージが。
ふむふむ。なになに・・。Gmail の API は送信のリミットがあるので、WordPress から大量メールを送るような場合には別のサービスを利用しろと。少し心配なので、Gmail API の 制限について調べてみると、1 日につきメッセージの送信数が最大 100 とのこと。確かに、本格的な商用サイトだったり、お問い合わせ経由で予約を受け付ける目的とかだとかなり心もとない数値ですね。今回のお問い合わせフォームの目的はそのようなものではないので、いったんこのまま進めます。
何やらクライアント ID、クライアントシークレット、あと Authorized Redirect URL と 3 つの入力欄が出てきました。これは該当の Gmail API を有効にして、連携するためのクライアント ID、クライアントシークレットと、認証の際の URL がここで指定されているものにせよ、ということのようです。
こちらから Gmail API を有効にしていきます。遷移すると、Google Cloud Platform に未アクセスの場合、同意事項のダイアログが表示されるかもしれません。こちらは同意して、進みます。すると、次のような画面になっているはずです。
作成に成功したら、次のような画面になりますので、「API とサービスの有効化」をクリックして、
「Gmail」で検索し「Gmail API」を選択します。
早速有効化していきます。
Gmail API のダッシュボード画面に出ますので、「認証情報を作成」していきます。
どうやら認証情報の作成画面と、Gmail API はつながっていないようで、ここでもう一度対象の API が「Gmail API」を入力する必要があります。ステップ 1 では「ユーザーデータ」を選択、
次に、OAuth 同意画面の表示項目の設定になるので、
「アプリ名」、「ユーザーサポートメール」(おそらくGmail API を設定しようとしている Google アカウントの gmail アドレスでいいと思います)、「デベロッパーの連絡先情報」の「メールアドレス」(WordPress 管理用のアドレス) を設定します。
スコープは何も入力せず「保存して次へ」を選び、以下のように、アプリケーションの種類を「ウェブアプリケーション」、名前を任意の値、承認済みの JavaScript 生成元には取得したドメインを、承認済みのリダイレクト URI には WP Mail SMTP の Authorized Redirect URL の「https://connect.wpmailsmtp.com/google/」 を設定します。なお、承認済みの JavaScript 生成元では IP アドレス等では設定できない点ご注意ください。
これで、認証情報は作成されますが、いったんダウンロード等はせず、「完了」へ。
クライアント ID とクライアントシークレットを取得する前に、
「API とサービス」の「OAuth 同意画面」で、「公開ステータス」で「アプリを公開」ボタンを押し、テスト状態から公開状態に変更しておきます。これを実施しておかないと、WP Mail SMTP から Gmail API に接続しようとした (OAuth 認証のプロセスが走った) 際に、403 エラーが出てしまいます。
「API とサービス」の「認証情報」のメニューに、新しい「OAuth 2.0 クライアント ID」が登録されていました。名前のリンクをクリックして詳細画面へ。
詳細画面に、クライアント ID とクライアントシークレットが表示されています。これらの値をコピペし、WP Mail SMTP に設定していきます。
「Connect to Google」を押すと、まずは下記のような警告画面が表示されると思います。
以下のような画面に遷移していきます。まずは Gmail API の認証情報を作成したアカウントを選択し、
以下のような警告が出ますが、「Continue」を押して続行、
さらに、以下のような警告画面が出ます。以下の赤枠の箇所をクリックして、許可します。
Gmail API への権限付与 (よく認可ともいいますかね) の確認については、「許可」
まだ聞いてくるか。よく日本の画面設計は確認を挟む、US の方はそうでもないなどと言われますが、Google のこの画面遷移を見る限りそうでもないようですね。「許可」しましょう。
WP Mail SMTP のセットアップ画面に戻り、「Success Authorization」のダイアログが出れば OK です。
そうするとフォーム名と送信元メールアドレス (認証情報を作成した Gmail API のアカウントですね) が設定されるので、確認して「Save and Continue →」
次に、WP Mail SMTP プラグインのどの機能を用いるか聞かれますが、ここは「Improved Email Deliverability」と「Email Error Tracking」にチェックが入っていれば OK です。
次に WP Mail SMTP の開発サイドから提案を受けるかどうかの画面に。問い合わせがキーになるサイトなら入れてもいいと思いますが、特にメッセージ送信の目的だけであればいったんここは何も記入しなくて OK かなと思います。
次は WP Mail SMTP Pro 版用のライセンスキー入力画面。本記事での利用分には無料の Lite 版で OK ですので、「Skip this Step」してしまいましょう。
次のような画面が出ると、WP Mail SMTP の初期設定は完了です。「Finish Setup」を押すか、初期設定がうまくいくか気になる人は「テストメールを送信」を押してみてください。
これで WP Mail SMTP によるメール送信の設定は完了です。一見手順が長いように見えますが、ほとんどは画面遷移が多いだけですので、やってみるとそこまで時間はかからないように思います。
Google reCAPTCHA v3 を使ったお問い合わせフォームのスパムからの保護
お問い合わせフォームやコメント欄を設けると、スパムの標的にされてしまいます。快適に WordPress を運用するためにも、スパム対策を入れておきましょう。
Invisible reCaptcha プラグインを使います。実は、reCAPTCHA v3 で Contact Form 7 の問い合わせフォームを保護する場合、実は Contact Form 7 の設定でできてしまうのですが、Contact Form 7 側で設定を行うと、WordPress サイト上の全てのページの右下に、reCAPTCHA のバッジが表示されるようになってしまいます。これはときにユーザの画面操作の邪魔になるので、Invisible reCaptcha プラグインを導入していきます。
他のプラグインと同様に、WordPress プラグインの新規追加画面で、「Invisble reCaptcha」キーワードで検索、Invisible reCaptcha プラグインをインストール、有効化します。
「設定」→「Invisible reCaptcha」画面内の「問い合わせフォーム」にて、「Contact Form 7 の保護を有効化」にチェックします。
次に、Google reCAPTCHA でキーを取得します。Google reCAPTCHA のページにアクセスします。
「v3 Admin Console」をクリックします (「Get Started」ではありません。こちらは reCAPTCHA Enterprise API という半ば有料版に案内されます)。
サイトの登録画面に遷移しますので、下記のように、保護するサイトを識別するための「ラベル」（サイト名等でOK）、reCAPTCHA タイプは v3、ドメイン (http や https のようなプロトコルは含めず)、reCAPTCHA 利用条件に同意するにチェックを入れて、「送信」を押します。
そうすると以下のようにサイトキーとシークレットキーが表示されますので、
サイトキー、シークレットキーを Invisible reCapcha の設定 （WordPress の「設定」→「Invisible reCaptcha」→「設定」）でそれぞれサイト鍵、秘密鍵に設定します。また、このタイミングで言語を「Japanese」に、バッジ位置を「インライン」に設定しておきます。
以上で、問い合わせフォームのできあがりです。
ネクストアクション
次は、Google、Bing の例を挙げて、立ち上げたサイトを検索エンジンにインデックスしてもらう (ランキングに出るようにしてもらう) 方法について、解説していきたいと思います。無料テーマの 1 つである Cocoon を WordPress にインストールする手順について、解説します。
