本ブログでも、普段仕事で納品しているウェブサイトでも便利に使わせてもらっている 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 のコンタクトフォーム作成時のコードにミスがあった
理由はこれです。
Contact Form 7 を利用開始すると、ソースに以下のようなコードを吐き出します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <form action="/contact/#wpcf7-f119-p121-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="119" /> <input type="hidden" name="_wpcf7_version" value="x.1.0" /> <input type="hidden" name="_wpcf7_locale" value="ja" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f119-p121-o1" /> <input type="hidden" name="_wpnonce" value="1000" /> </div> <p>お名前 (必須)<br /> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p> <p>メールアドレス (必須)<br />※キャリアメールはご遠慮ください<br /> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p> <p>お問い合わせしたい記事のタイトル<br />※記事以外の問い合わせは要件名を<br /> <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span></p> <p>お問い合わせ内容<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p> <p><span class="wpcf7-form-control-wrap acceptance-683"><input type="checkbox" name="acceptance-683" value="1" class="wpcf7-form-control wpcf7-acceptance" aria-invalid="false" /></span> 確認ページはございません。この内容でよろしければ左チェックボックスにチェックをいれて送信ボタンをクリックして下さい。</p> <p><input type="submit" value=" 送信 " class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> |
で、以下が WordPress 管理画面の Contact Form 7 でフォーム作成を作成した画面。
※ これらは当ブログのコンタクトフォームのコードです。
Contact Form 7 は、
1 2 3 | <form> form タグは自動で吐き出します。 </form> |
このように「<form>から</form>」のコードを自動生成します。
しかし、今回の知人の場合は、テーブルレイアウトを絡めたオリジナルデザインで作成したまでは良いが、自動で <form> タグを吐き出すことを知らずに、form タグを削除せずにそのまま残しておいたため、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form> <form action="/contact/#wpcf7-f119-p121-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="119" /> <input type="hidden" name="_wpcf7_version" value="x.1.0" /> <input type="hidden" name="_wpcf7_locale" value="ja" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f119-p121-o1" /> <input type="hidden" name="_wpnonce" value="1000" /> </div> ここにコンタクトフォーム作成欄のコードがはいる </form> </form> |
このような2重 form タグとなってしまい Contact Form 7 が動かないという現象が起きていました。
その後、form タグを削除することによって Contact Form 7 は平常通り普通に動くようになりました・・・めでたしめでたし。
自作で WordPress サイトを作成する場合、form タグを消し忘れないようにしてくださいね。自作サイトほど起こるケアレスミスです。
あとがき
Contact Form 7 だけではなく、ウェブサイト作成では、こんな簡単なことで機能しなくなることはざらにあります。
原因は今回のように本当に些細なことの方が多いです。そして、些細なことだからこそ「ハマって」抜け出せなくなるんですよね・・・。
Contact Form 7 のフォームの見た目をカスタマイズした場合は気をつけてくださいね！
というわけで、今回は「いくつかある Contact Form 7 が動かない問題の中のひとつで、製作者のケアレスミスからくる送信できない事例」を紹介しました。
