Contact Form 7の送信ボタンが反応しない！確認したい7つの原因

こんにちは、Dr.WordPressです。

WordPressのお問い合わせフォームでContact Form 7を使用していて、

「送信ボタンを押しても反応しない」

ということはありませんか？

例えば、

「ボタンをクリックしても何も起こらない」

「読み込み中のまま進まない」

「エラーメッセージも表示されない」

「昨日までは普通に送信できていた」

といったケースです。

送信ボタンが反応しない場合、Contact Form 7だけではなく、JavaScriptやプラグインなどが影響している可能性もあります。

今回は、Contact Form 7の送信ボタンが反応しないときに確認したい7つの原因をご紹介します。

① 必須項目が入力されているか確認する

まずはフォームの入力内容を確認してみましょう。

Contact Form 7では、名前やメールアドレスなどを必須項目として設定できます。

入力内容に問題がある場合は、正常に送信できません。

例えば、

・必須項目が空欄

・メールアドレスの形式が違う

・入力内容に問題がある

などです。

送信ボタンだけを見るのではなく、フォーム内に入力エラーが表示されていないか確認してみましょう。

② JavaScriptでエラーが発生している

Contact Form 7の動作にはJavaScriptが関係しています。

特にAjaxによる送信など、一部の機能ではJavaScriptが使用されています。

そのため、ページ内でJavaScriptエラーが発生していると、送信処理が正常に動作しない場合があります。

原因はContact Form 7とは限りません。

例えば、

・テーマのJavaScript

・別のプラグイン

・独自に追加したJavaScript

などのエラーが影響する場合もあります。

ブラウザの開発者ツールを使うと、JavaScriptエラーが発生していないか確認できます。

③ 別のプラグインと競合している

Contact Form 7と別のプラグインが競合して、正常に送信できなくなる場合があります。

特に、

・キャッシュ

・JavaScript最適化

・セキュリティ

・フォーム関連

・スパム対策

などのプラグインを使用している場合は確認したいポイントです。

Contact Form 7公式でも、送信後に処理が進まない場合などは、プラグインやテーマとの競合が原因として考えられると案内されています。

「プラグインを追加・更新したあとから反応しなくなった」

という場合は、直前に変更したものを確認してみましょう。

④ キャッシュやJavaScript最適化が影響している

サイトを高速化するために、

・キャッシュ

・JavaScriptの圧縮

・JavaScriptの結合

・JavaScriptの遅延読み込み

などを使用している場合があります。

これらの設定によってContact Form 7に必要なJavaScriptの読み込み順序などが変わり、正常に動作しなくなるケースがあります。

「高速化設定を変更したあとから送信できない」

という場合は、キャッシュやJavaScript最適化の設定も確認してみましょう。

⑤ Contact Form 7の設定を確認する

フォーム自体の設定に問題がある可能性もあります。

特に、

・フォームを編集した

・入力項目を追加した

・送信ボタンを変更した

・フォームタグを書き換えた

といった直後に動かなくなった場合は確認が必要です。

「フォームをカスタマイズしてから反応しなくなった」

という場合は、直前に変更した部分を確認してみましょう。

⑥ テーマや独自カスタマイズが影響している

使用しているWordPressテーマや独自カスタマイズが、Contact Form 7へ影響する場合もあります。

例えば、

・テーマを更新した

・JavaScriptを追加した

・フォームのHTMLを変更した

・送信ボタンを独自にカスタマイズした

といったケースです。

Contact Form 7公式でも、フォームの動作がブラウザによって異なったり正常に利用できなかったりする場合、HTMLやCSS、JavaScriptのエラーを確認するよう案内されています。

送信ボタンのデザインを変更した直後などは、そのカスタマイズも確認してみましょう。

⑦ REST APIやセキュリティ設定を確認する

Contact Form 7では、Ajax送信にWordPressのREST APIが使用されます。

そのため、

・REST APIを無効にしている

・セキュリティプラグインで制限している

・サーバー側で通信を制限している

などの場合、Ajaxによる送信が正常に動作しない可能性があります。

特にセキュリティ設定を変更したあとから送信できなくなった場合は、Contact Form 7だけではなくWordPressやサーバー側の設定も確認してみましょう。

「送信ボタンが反応しない」にも症状の違いがあります

一口に「送信ボタンが反応しない」といっても、

「クリックしても完全に何も起こらない」

「読み込みマークが出たまま止まる」

「エラーが表示される」

「ページが再読み込みされる」

では、原因が違う場合があります。

まずは、

「ボタンを押したあとに何が起きているのか」

を確認してみましょう。

原因を調べるうえで重要なヒントになります。

Contact Form 7が送信できないときの確認順序

原因が分からない場合は、次の順番で確認してみましょう。

STEP 1

入力エラーがないか確認する

STEP 2

別のブラウザでも試してみる

STEP 3

JavaScriptエラーを確認する

STEP 4

直前に更新したプラグインを確認する

STEP 5

キャッシュや最適化設定を確認する

STEP 6

Contact Form 7のフォーム設定を確認する

STEP 7

必要に応じてREST APIやサーバー設定を確認する

重要なのは、原因が分からないままContact Form 7を削除したり、フォームを作り直したりしないことです。

まずは症状を確認して、ひとつずつ原因を切り分けてみましょう。

まとめ

Contact Form 7の送信ボタンが反応しない場合は、

① 入力内容

② JavaScriptエラー

③ プラグインの競合

④ キャッシュやJavaScript最適化

⑤ Contact Form 7の設定

⑥ テーマや独自カスタマイズ

⑦ REST APIやセキュリティ設定

などを確認してみましょう。

「送信ボタンを押しても何も起こらない」

「読み込み中のまま止まってしまう」

「昨日まで送信できていたのに突然動かなくなった」

という場合は、Dr.WordPressでもContact Form 7のトラブルに関するご相談を受け付けています。

現在のフォームやサイトの状態を確認し、どこに原因がありそうなのかを切り分け、必要な対応方法をご案内します。

WordPressで困ったときの「まず聞ける場所」として、お気軽にご相談ください。