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

2021年4月16日

この記事の要約

「送信」クリック時に、コンソールを確認して同じエラーが出ている場合は、下記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についてもう少し気になる方は、過去に記事にしているのでこちらもご覧ください。

Webrandum

WordPressのデータを取得できるWP REST APIの使い方

https://webrandum.net/wp-rest-api

WordPressには色んなデータをJSON形式で取得できるWP REST APIというAPIが実装されています。今回は、その使い方についてまとめておきます。WP REST APIとはWP REST APIはWordPressのデータをJSON形式で返してくれるAPIです。やろうと思えば、記事の情報を全てAjaxで非同期で読み込んでいくのも可能そうです。WP REST APIの使い方ルールに沿ったURLにアクセスすると、JSONが返ってくる事が分かります。最新の投稿一覧下記のURLにアクセスすると、最新の投稿一覧が取得できます（example.comはWordPressが設置されてあるサイトのアドレ...

3. WordPressテーマをデフォルトのテーマに変えて確認

なにかテーマに記述されているコードが原因の場合もあるので、一度WordPressテーマをデフォルトのものに変えて確認します。

もしデフォルトテーマだと正常に動作する場合は、テーマに余計なコードが書かれていそうです。

特にfunctions.phpを中心に、怪しそうな記述がないか確認していきます。
（テーマでjQueryを読み込まないように設定してしまっている場合もエラーが出ますが、その場合はコンソールで別のエラーメッセージが出ます）

4. プラグインを1つずつ無効化にして確認

プラグインが干渉してしまって、正常に動作していない可能性もあります。

1度Contact Form 7以外のプラグインを無効化してしまって、再度試します。
それで正常に動作するようになったら、どのプラグインが原因なのかを1つずつ有効化と動作確認を繰り返して突き止めます。

原因のプラグインが見つかったら、下記2つの選択肢があります。

原因となるプラグインは使わないようにして諦める
原因となるプラグインの別バージョンを試してみる

Contact Form 7と、原因のプラグインのバージョンの相性が悪い可能性もあるので、別バージョンを試してみるのはやる価値があります。
（アップグレードは問題ないですが、ダウングレードさせるのはセキュリティ的にもよくないですし、いつかはアップデートしないといけないので根本的な解決にはならないので注意が必要です）

別バージョンを試す場合は「WP Rollback」というプラグインを使うと、プラグイン一覧画面から簡単にバージョン変更ができます。