WordPressのContact Form 7で送信時に回転アイコンが出たまま止まってしまうときのチェックリスト

この記事の要約
「送信」クリック時に、コンソールを確認して同じエラーが出ている場合は、下記4つをチェックする。
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
- Contact Form 7の設定が間違っていないか確認
- REST APIが無効化されていないか確認
- WordPressテーマをデフォルトのテーマに変えて確認
- プラグインを1つずつ無効化にして確認
WordPressプラグインのContact Form 7を使ってフォーム実装をしていると、送信時に回転アイコンが出たまま止まってしまうことがあります。
コンソールログを見ると、「送信」ボタンをクリックしたタイミングで下記のエラーが出ていました。
Failed to load resource: the server responded with a status of 500 (Internal Server Error)このエラーの原因は複数あるみたいなので、今回はチェックする項目をまとめておきます。
1. Contact Form 7の設定が間違っていないか確認
まずはContact Form 7の記述が間違っていないか確認します。
特に「送信先」「送信元」の2箇所を重点的にチェックして、余計な文字列が入っていないか、エラーになっていないか確認します。
2. REST APIが無効化されていないか確認
Contact Form 7のバージョン4.8以降は、WordPressのREST APIという機能を使って処理をしている部分があるようです。
このREST APIを使うと、外部からWordPressの記事一覧情報を取得したりできるので、便利な反面、それがイヤな場合は無効化しているサイトもあります。
ただ、Contact Form 7ではこのREST APIを使って処理している部分があるので、無効化されているとエラーが出て処理が途中で止まってしまいます。
REST APIが有効か無効か確認する方法は、サイトURLの後ろに「/wp-json/」を付けてアクセスします。
(当サイトの場合は「http://webrandum.net/wp-json」となる)
これで大量の文字列が出てきたら有効、下記のような文字列しか表示されない場合は無効になっています。
{"code":"disabled","message":"REST API is disabled.","data":{"status":401}}無効化されているREST APIを有効に戻す場合は、テーマフォルダのfunctions.phpを開いて、下記のコードがないか確認し、適用している部分をコメントアウトします(必ずバックアップを取ってから作業しましょう)。
return new WP_Error( 'disabled', __( 'REST API is disabled.' ), array( 'status' => rest_authorization_required_code()));設定できたあとは、またサイトURLの後ろに「/wp-json/」を付けてアクセスして確認します。
ちなみに、REST APIについてもう少し気になる方は、過去に記事にしているのでこちらもご覧ください。
3. WordPressテーマをデフォルトのテーマに変えて確認
なにかテーマに記述されているコードが原因の場合もあるので、一度WordPressテーマをデフォルトのものに変えて確認します。
もしデフォルトテーマだと正常に動作する場合は、テーマに余計なコードが書かれていそうです。
特にfunctions.phpを中心に、怪しそうな記述がないか確認していきます。
(テーマでjQueryを読み込まないように設定してしまっている場合もエラーが出ますが、その場合はコンソールで別のエラーメッセージが出ます)
4. プラグインを1つずつ無効化にして確認
プラグインが干渉してしまって、正常に動作していない可能性もあります。
1度Contact Form 7以外のプラグインを無効化してしまって、再度試します。
それで正常に動作するようになったら、どのプラグインが原因なのかを1つずつ有効化と動作確認を繰り返して突き止めます。
原因のプラグインが見つかったら、下記2つの選択肢があります。
- 原因となるプラグインは使わないようにして諦める
- 原因となるプラグインの別バージョンを試してみる
Contact Form 7と、原因のプラグインのバージョンの相性が悪い可能性もあるので、別バージョンを試してみるのはやる価値があります。
(アップグレードは問題ないですが、ダウングレードさせるのはセキュリティ的にもよくないですし、いつかはアップデートしないといけないので根本的な解決にはならないので注意が必要です)
別バージョンを試す場合は「WP Rollback」というプラグインを使うと、プラグイン一覧画面から簡単にバージョン変更ができます。


ターミナルでGitを使う時に最低限覚えておきたいコマンド
Visual Studio Codeの基本|概要やインストールから日本語化など最低限の設定方法
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
WordPressで「予約投稿の失敗」となってしまう場合の対処方法
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
Google Maps APIをローカル開発環境で使用するときの制限設定方法
Macで.pemを使ってAmazon EC2インスタンスへSSH接続する方法
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
Visual Studio Codeとスニペット・ドキュメント検索アプリの「Dash」連携を行うプラグイン
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
AirPods ProをiPhoneの背面タップで接続できるようにする
「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ
Visual Studio Codeでできる最低限のGit操作方法
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
Macログイン時に自動起動するアプリの管理方法
Drive File Streamの中にあるフォルダを登録して、Alfredから検索結果に表示する方法
どちらの表記がより一般的なのか? /「ウインドウ」と「ウィンドウ」/「バイオリン」と「ヴァイオリン」/「バーチャル」と「ヴァーチャル」
ウェブ開発時のテスト環境と本番環境の取り違えを防ぐChrome拡張機能「Environment Marker」
コードスニペットの管理方法や命名規則について
既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく