Contact Form 7 からメールを送信できない (急にできなくなった) との相談が、国内外のお客様両方から相次いだ。
｢WordPress に Contact Form 7 を利用した問い合わせフォームを設置しているのですが、メールを送信できない原因が分からずに困っています｣ という内容である。
今回は、Contact Form 7 からのメール送信ができなくて困っている方のため、実はひっそり増えていたメール送信エラーの「原因」および「その解決方法」についてまとめてみた。
原因：
Rest API が無効に設定されていた
ここ最近、Contact Form 7 からメールを送信できない（急にできなくなった）という相談が多くなっていた『原因』はズバリこれだった。
そう、何かと話題の Rest API である。
WordPress における Rest API はバージョン 4.7 から標準で有効となるも、2017年に入り「認証なしでサイトを改ざんできるバグ」が発見されたため、セキュリティ面の懸念から機能を『無効』に設定した人は少なくない。
150万件の WordPress サイトで改ざん被害が出たニュース は記憶に新しく、とりあえず無効にしようとする理由はよく分かる。
ところが、Rest API が無効に設定されている状態で Contact Form 7 の送信ボタンを押すと、以下の「回転矢印アイコン」がくるくると回ったまま先に進むことができない。
｢問い合わせ送信フォーム｣ であれ ｢セミナー申し込みフォーム｣ であれ、訪問者がメールを送信できない状態を放置するのは、顧客獲得のチャンスを棒に振ってしまうことになる。
もう既にこの状況に気付いているなら、直ちに入念な確認と対策をしよう (技術のサポートが必要な方は、1回あたり｢30分｣から依頼できる WordPress オンライン講座 & 技術相談 へ)。
Javascript のエラーを確認する
さて Chrome デベロッパーツールで検証すると以下の Javascript エラーが発生している。
これは、サーバー側で『/wp-json/contact-form-7/v1/contact-forms/30/feedback』の URL に対してアクセスを許可していないことを示している『HTTP 401 認証エラー』だ。
実は Contact Form 7 Ver. 4.8 以降では、メールフォームの ｢非同期処理｣ によるメール送信に『Rest API』を使用している。
だから、Rest API 機能が無効になっていると Javascript 実行エラーとなり、フォーム送信できない。問い合わせをデータベース保存する拡張プラグイン も、そもそもデータ自体を受け取れていないのだから意味がない。
なお、Rest API 無効の設定次第では ｢HTTP 500 内部サーバーエラー｣ が出る場合もあるようだ。ただ、原因は同じく Contact Form 7 が Rest API を使えないことにある。
Rest API 無効化の設定は ｢どこ｣ ？
Rest API を無効化している設定箇所として、僕が実際に確認したのは以下の６つである。
もしかすると別のケースもあるかもしれないが、まずは以下の箇所をひとつひとつ確認していくことをおすすめする。
WordPress 側の原因
- Disable Rest API などのプラグイン
(すべての Rest API が無効化されている) - functions.php での Rest API 無効化設定
(Contact Form 7 を例外にしていない場合) - テーマによる Rest API の無効化設定
(例: Simplicity2 にて事例を確認済み)
サーバー側の原因
- 何かの理由でレンタルサーバーが機能制限中
- .htaccess による Rest API の無効化設定
- サーバー運営会社による国外アクセス制限
レンタルサーバーが試用期間だったり、更新の支払いを忘れてしまっていたりする場合にも Rest API が制限される。まさかと思っても、僕のクライアント様で実際にあったケースだ。念のために確認してみて欲しい。
また、僕が実際に確認した「6. サーバー運営会社による国外アクセス制限」の情報を以下に掲載しておく。以下のレンタルサーバーを使用しているサイトでは、2017年2月7日(火) より国外からの Rest API アクセスがデフォルトで無効の設定になっている。
Xserver（エックスサーバー）
https://www.xserver.ne.jp/news_detail.php?view_id=3149
wpX（ダブリューピーエックス）
https://www.wpx.ne.jp/server/news_detail.php?view_id=1557
複数箇所で無効化されている可能性も
ここでひとつ特筆すべき点は、サイト運営者が気付いていない間に、複数箇所で Rest API が無効化されている可能性さえあることだ (3つ以上の無効設定が効いている可能性もある)。
実際、サイト管理者がセキュリティ対策として ｢Disable Rest API｣ のプラグインを導入していたその一方で ｢サーバー運営会社による国外アクセス制限｣ まで掛かっていたケースを既に解決した。これは、僕が『海外ノマド生活』をしていることもあって判明した。
国内チームで海外サイトを運営している場合、いくら送信テストをしていたとしてもエラーが起こっていることに気付けないのだ。
気付けていない人が多い理由
今回この件でお問い合わせを下さった方々は、比較的 PV 数の多い WordPress サイトを運営されていた。
問い合わせメールがパッタリとなくなったり、ユーザから親切な報告があったりしたことで、Contact Form 7 の異常に気付けたのだ。
ところが、PV 数および問い合わせ数の少ないサイト運営者では、メールを送信できていない状況に「まだ」気付いていない人も多そうだ。
というのも、実は WordPress 管理者がテストをすると問題なくメールは送信され、訪問者が送信すると実際はエラーになる状況なのだ。
つまり、親切なユーザが ｢問い合わせフォームからメールを送信できないようです｣ と連絡をしてくれても、運営者が詳しく確認しなければ｢弊社の環境では送信できております｣ などと回答してしまい、対策を取らず放置してしまう危険性さえ孕んでいる。
警告１. 知らない間に影響が出ている
WordPress 4.7 での ｢Rest API の脆弱性｣ が発表された2017年2月、セキュリティ確保のためにと世界中の WordPress サイトで様々な対策がなされた。
ただ、その対策が Contact Form 7 のメール送信機能を制限することになると想像した人はいなかっただろう。
その後 WordPress を4.7 以上にアップデートしたタイミング、セキュリティ対策のために Rest API を無効化したタイミング、あるいは Contact Form 7 のプラグインをバージョン 4.8 以上にアップデートしたタイミングなど、影響が出るタイミングは様々あるが、とにかく知らない間に送信できなくなっていたのだ。
どの組み合わせで影響が出るかが分かりづらいので、運営するサイトで Contact Form 7 を利用している人は、とにかくフォームの状況を確認してみることをおすすめする。
警告２. 見えない形で影響が出ている
とても厄介なことに『1.Disable Rest API』のプラグイン導入で Rest API を無効化すると、｢非ログインユーザ｣ に対する Rest API のみ無効となってしまっている。
つまり、WordPress 管理者がログイン済みの状態で Contact Form 7 のテストをすると、正常にメールが送信される。ところが、サイト訪問者が問い合わせフォームの送信をしようとすると、実際にはフォームが動作しない。
サイト管理者以外からの不正なアクセスを防ぐセキュリティ対策としては一見正しいのだが、メール送信フォームの挙動としてはあるまじきことで、結果的に ｢WordPress 管理者｣ だけ事実に気付けない形となっている。
｢6.サーバー運営会社による国外アクセス制限｣ の場合についても同じことが言える。サイトの運営陣が国内でテストをする分にはメール送信できるので、国外からの問い合わせを想定していたとしても「海外ではメールを送信できない事実」に気付けていないのだ。
Contact Form 7 で送信テストをするなら、WordPress からログアウトした状態でもテストすることと、無料の VPN Gate などを利用して国外の IP アドレスでもテストしよう。テストは “網羅性” を高めることが基本。
解決方法１. Rest API の有効化
原因が分かったところで、次に解決方法を見ていこう。
多くの場合、Rest API の脆弱性が解決された WordPress のバージョンをインストールし、Rest API を有効にすれば全面解決する。
以下 ｢手順1｣ ｢手順2｣ を参考に WordPress の Rest API が有効になるよう設定しよう。
なお、Contact Form 7 への Rest API のみを有効化することもできる。脆弱性の問題が解決したとはいえ、安全のため必要なところにだけ Rest API を許可したいという方は ｢手順3｣ を参考にして欲しい。
手順１. WordPress を最新版にアップデート
WordPress 4.7 より古いバージョンを使っている場合は、そもそも Rest API が標準で有効になっていない。また、前述のように 4.7 や 4.7.1 は最悪急の脆弱性がある ため、まずは『最新版の WordPress にアップデートすること』が推奨される。
WordPress を最新にアップデートする重要性については、WordPress 独学者にありがちな９つの失敗 という過去記事でも書いたとおりだ。WordPress 本体に限らず、プラグインも最新の状態を保つように心掛けよう。
なお、WordPress のバックアップには UpdraftPlus プラグインを使うことをおすすめする。最新版へアップデート中もしものことが起きても、管理画面からワンクリックで復元できる。
手順２. WordPress の Rest API を有効にする
手順１で最新版の WordPress にアップデートできたら、上述した６つの原因に対して Rest API を有効にする設定を行っていこう。
WordPress 側とサーバー側の両方から原因がなくなれば、Contact Form 7 は直ちに正しく動作するはずだ。
WordPress 側
- Disable Rest API などのプラグインを停止
- functions.php による Rest API の無効化 を削除
(不安なら手順3で Contact Form 7 だけ例外として許可する) - テーマによる Rest API の無効化設定があれば解除
(例: Simplicity2 で Rest API を有効にする方法)
サーバー側
- レンタルサーバーが正常に動作中か再確認
- .htaccess による Rest API の無効化 があれば削除
- サーバー運営会社による国外アクセス制限があれば解除
僕が確認した以下２つのレンタルサーバーでは Rest API の国外アクセス制限を無効にする方法がマニュアルで公開されている。以下を参考にしていただきたい。
Xserver（エックスサーバー）
https://www.xserver.ne.jp/manual/man_server_wpsecurity.php
wpX（ダブリューピーエックス）
https://www.wpx.ne.jp/server/manual/wordpress_setting_wpsecurity.php
手順３. Rest API の有効/無効を個別設定にする
最後に、Rest API の有効化にセキュリティの不安が残る場合は、個別の API ごとに『有効/無効』を設定しておこう。今後は、Contact Form 7 以外でも Rest API を使った ｢便利な機能｣ がどんどん実装されていくはずだ。基本 Rest API は無効にして、信頼できる使いたい機能だけ Rest API を有効にするアプローチである。少々面倒ではあるが……。
functions.php の具体的な記述方法は、Contact Form 7 の Rest API のみ個別に有効化する実際の例 が参考になる。ただ、もっと簡単に設定できるプラグインもいずれ登場するだろう。
解決方法２. 通常フォーム送信に切り替える
どうしても Rest API を有効にしたくないか、『解決方法１』の設定作業が自分でできそうにないという方の場合は ｢Contact Form 7｣ のアドオン機能 ｢Contact Form 7 Controls｣ プラグインを導入し、Rest API による非同期フォーム送信ではなく『通常フォーム送信』に切り替える解決方法を取ると良いだろう。
こちらの方法はページの再読み込みが発生するため、『矢印回転アイコン』を表示させて Rest API でメールを送信する場合と比べると ｢表示速度｣ が遅い。ただメール送信完了時に『別のページ』に誘導させ、より多くの情報を表示させたいケースなどでは便利にもなる。
手順１. Contact Form 7 Controls をインストール
まず、WordPress 管理画面の [プラグイン » 新規追加] から ｢Contact Form 7 Controls｣ をインストールして有効化しよう。
手順２. コンタクトフォームの設定を変更
Contact Form 7 Controls を有効化すると、Contact Form 7 のフォーム編集画面に『Customize』のタブが追加される。
あとは、以下画像の赤枠で示しているように『AJAX Submissions » Disable AJAX for this form』にチェックを入れて保存しよう。
また、もう１つの赤枠で囲っている部分では、送信完了時にリダイレクトさせたいページの URL が指定可能だ。
何も設定しない場合はフォームのあるページが再表示されるが、もしサンクスページなど別のページにジャンプさせたいなら、そのページの URL をここへ入力して保存しよう。
なお、上記の設定はコンタクトフォームごとにそれぞれ変更する必要がある。同一サイト上に複数のコンタクトフォームを設置している場合は、忘れずにひとつずつ設定変更しよう。
取りこぼしの予防策もついでに！
メールの取りこぼしや、せっかくの見込み客の離脱を防ぐための対策としては、フォーム上に『別の連絡窓口』を掲載しておくことも有効である。電話番号、メールアドレス、SNS などを必要に応じて記しておくと良いだろう。
また「コンタクトフォーム送信後にサイトから自動返信メールが届く旨」を明記しておくのも有効な手段だ。自動返信メールが届かないと ｢おかしいな｣ と気付けるので、別の連絡窓口を使って親切に教えてくれる人も現れやすい。
さらに「送信エラーにお気付きの際には、大変お手数ではございますが、以下のアドレスまでご連絡ください」などのメッセージまで添えておけば、親切なユーザが教えてくれる可能性は一段と高くなるだろう。
今回の件について
今回の問題が発生した Contact Form 7 は、WordPress ユーザーコミュニティの中でも、長年利用され愛され続けてきたプラグインだ。
しかし、2017年6月のアップデートによって多くのコンタクトフォームが「知らない間に」動作しなくなっていたと思われる。
おそらく、設置済みのフォームがメールを送信できない状態であることに気付けていない人も多いだろう。「最近サイトからお問い合わせがないなぁ」と思った方は、Contact Form 7 が『Rest API』を使用できずメールを送信できていないのかもしれない。
WordPress で作ったホームページやブログに Contact Form 7 でコンタクトフォームを設置している方は、知らない間にメールを送信できない状態になっていないか、この記事を参考に再度テストしてみることをおすすめする。