WEB担当者のためのスキルアップノート「Contact form 7」が動かない⁉事象と解決法まとめ
WordPressでホームページを制作する際、お問い合わせフォームを簡単に作れるでおなじみのプラグイン「Contact form 7」。
本ブログでもたびたびご紹介しております。
過去紹介した内容としては、「カスタムフィールドの値を取得させる方法」や「記事タイトルをチェックボックスに反映する方法」と、基本的な使い方からちょっと応用を効かせた機能の実装方法についてでした。
今回は機能を実装し終えて「実際に送受信の確認をしてみよう！」となった段階でのお話です。
「Contact fomr 7」を実装した際表示に問題はなさそうなのに、なぜかうまく動かないという事象に遭遇することもあります。
「Contact form 7」サイト内のFAQにもうまく動かないときの原因についての回答はあるものの、いまいちピンとこない回答も。。
そこで今回は、本ブログにて考えられる原因や解決法をより具体的に提示したいと思います。
Contents
【事象】「送信」を押すと、ページが再読み込みされるだけで送信もエラーも出ない
- フォームの項目に入力し、送信を押すとページが再読み込みされる
- 「送信」を押して再読み込みになってしまったURLを見ると、長々とした見慣れない羅列のURLに変わっている
このような事象が出た場合、以下の内容を確認してみましょう。
【確認事項】<form>タグが重複している可能性はないか？
「Contact form 7」のショートコードを埋め込む際に注意しなければいけない点です。
ショートコードというのは、管理画面内で「Contact form 7」を使ってフォームを作成した際に生成される下記のようなもの。
[contact-form-7 404 "Not Found"]これをPHPファイルに埋め込む際には
<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?> という形で記述すればOKです。
例えば、管理画面内「Contact form 7」から
<p>お名前（必須）
[text* your-name]</p>
<p>メールアドレス（必須）
[email* your-email]</p>
<p>電話番号<br>
[tel your-phone]</p>
<p>メッセージ本文（必須）
[textarea* your-message]</p>
[submit "送信"]と設定したとします。
これをショートコードでテーマファイルに埋め込んだ場合、以下のようなソースが出力されます。
<form action="#wpcf7-****-**" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="***" />
<input type="hidden" name="_wpcf7_version" value="5.1.7" />
<input type="hidden" name="_wpcf7_locale" value="ja" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-****-**" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
</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 />
<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 />
<span class="wpcf7-form-control-wrap your-phone">
<input type="tel" name="your-phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" 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 wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea>
</span>
</p>
<p>
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" />
</p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>ショートコード内には<form>タグが含まれているのがわかりますよね。
<form>
<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
</form> というような記述にしてしまっていると<form>タグが二重になってしまうため、正しく動かなくなるというわけです。
ショートコードの埋め込みによりどんなソースが出力されるかを理解した上で、<form>タグ以外にも重複やミスがないか確認を行いましょう。
【事象2】フォームが動かない
- 「送信」を押しても何も反応しない
- 入力内容に不足はないのに、「送信」を押すとエラーメッセージが表示される
この場合、いくつかの原因が考えられます。
どちらもWordPressコーディングで必須のタグですが、入れ忘れてしまっている可能性はないかチェックしてみましょう。
<?php wp_head;?>や<?php wp_footer;?>というのは、jQueryを読み込むために必要なタグです。
フォームが動かないのは、タグが記述されていないことによりjQueryが正しく読み込めないため。
<?php wp_head;?>は<head>閉じタグの直前に、<?php wp_footer;?>は<body>閉じタグの直前などにきちんと記述されているか確認してみましょう。
【確認事項2】プラグインが競合している可能性はないか？
「Contact form 7」だけに限らず、WordPressではプラグイン同士が競合し正しく機能されない場合があります。
複数のプラグインを有効化している場合は一度「Contact form 7」以外のプラグインを一度無効化にし、再度送信ボタンが機能するかどうかの確認を行ってみてください。
【事象3】「送信」を押した後くるくると回転矢印のアイコンが表示されて送信が完了されない
- 送信ボタンは押せたが、いつまでも回転矢印のアイコンがくるくるしたまま動かない
この場合、サーバーの設定を疑ってみましょう。
確認事項：サーバー設定でREST API無効化になっているか？
REST APIが有効化されている場合、海外からのスパムメールを制限するため国外IPアドレスが拒否されます。 「Contact form 7」がその影響を受け送信できない事象を招くことがあるようです。
ご自身のサイトで使用しているサーバー設定の見直しを行い、一度試してみてください。
まとめ
こうした事象は原因がわかってしまえば案外単純なものも多いです。
今回は単純だけど陥りやすい（遭遇しやすいかもしれない）落とし穴としていくつか事象をまとめてみました。
もし似たような事象に陥ってお困りの方がいれば、ぜひ今回の内容を確認してみてください。