Contact Form 7 送信ボタンを押しても送信できない!ページが再読込される問題

About WordPress

本ブログでも、普段仕事で納品しているウェブサイトでも便利に使わせてもらっている WordPress お問い合わせフォームプラグイン「Contact Form 7」。

先日、自分でウェブサイト作成にトライしている知人から、

お問い合わせフォームに Contact Form 7 を使ったんだけど、送信ボタンを押してもページが再読込されるだけで送信できないし、入力不備の注意書きもでないんだよ~(泣)何がいけないのかな~???

というヘルプ相談のLINEが届いたのです。

というわけで、今回はいくつかある Contact Form 7 が動かない問題の中のひとつで、製作者のケアレスミスからくる送信できない事例を紹介します。

平常の Contact Form 7 の動作

上の画像は、当ブログのお問い合わせフォームです。

ちゃんと動作している Contact Form 7 なら送信ボタンを押せば普通に送信できますし、入力不備があれば画像のように注意書きが表示されます。

しかし、今回の知人の場合は「お問い合わせページが再読込されて何もアクションがない」という状況です。

ネットで調べてみると・・・

知人は、ぼくに相談する前にネットでいろいろ調べてみて試してみたそうなのですが、検索結果の多くは、「Javascript に問題(競合してるから)」や「API のバグ」など見当違いの小難しいことばかり・・・。

そんなことも実際に起こったからネットにあるのでしょうが、原因はもっと簡単なことだったりすることの方が多い気がします。単純なケアレスミスとか。

今回がまったくもってそれでした。

今回の Contact Form 7 が動かない原因

知人の Contact Form 7 が動かない原因は単純なケアレスミスでした。

理由はこれです。

Contact Form 7 を利用開始すると、ソースに以下のようなコードを吐き出します。

で、以下が WordPress 管理画面の Contact Form 7 でフォーム作成を作成した画面。

これらは当ブログのコンタクトフォームのコードです。

Contact Form 7 は、

フォーム作成では「<form>から</form>」の間のコードを入力するわけです。

しかし今回の知人の場合は、テーブルレイアウトを絡めたオリジナルデザインで作成したまでは良いが、自動で <form> タグを吐き出すことを知らずに、form タグを削除せずにそのまま残しておいたため、

このような2重 form タグとなってしまい Contact Form 7 が動かないという現象が起きていました

その後、form タグを削除することによって Contact Form 7 は平常通り普通に動くようになりました・・・めでたしめでたし。

あとがき

Contact Form 7 だけではなく、ウェブサイト作成では、こんな簡単なことで機能しなくなることはざらにあります。

原因は今回のように本当に些細なことの方が多いです。そして、些細なことだからこそ「ハマって」抜け出せなくなるんですよね・・・。

というわけで、今回は「いくつかある Contact Form 7 が動かない問題の中のひとつで、製作者のケアレスミスからくる送信できない事例」を紹介しました。