Contact Form 7 add confirm が動かない時に確認すること

公開2018.02.19更新2020.05.10

WordPressでカンタンにお問い合わせフォームを設置できる「Contact Form 7」に追加で入れるだけで確認画面をつけることができるプラグイン「Contact Form 7 add confirm」ですが、動かないっていうことががたまーにあります。そんな時に確認することをまとめましたので紹介します。

Contact Form 7 add confirm が動かないって時のチェックポイント

私もこの2点でつまづいたことがあるので、困っている人の手助けに少しでもなれたらいいかもってここにまとめておきます。

「wp_head」と「wp_footer」を読み込んでいない

無料配布のテーマを使っている場合はおそらく問題になることはありませんが、自作テーマを使ってサイトを構築している時にこの問題にハマったことがありました。

WordPressでテーマを作っている人には当たり前なのかもしれませんが、「wp_head」と「wp_fotter」の2つを読み込むことを忘れてしまうことがあります。

「Contact Form 7 add confirm」はWordPressのデフォルトの jQuery を使用して動作しているようなので、この2つを書き忘れて確認画面に遷移しないってことがあるようです。

つまりWordPressのテーマでちゃんと記述があるか確認するとOKなわけですが、それぞれの位置関係はこのようになっています。

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WordPressテーマ</title>

<?php wp_head(); ?>
</head>
<body>

<?php wp_footer(); ?>
</body>
</html>

上の例でいうと「<?php wp_head(); ?>」の位置は「</head>」タグの直前で、「<?php wp_footer(); ?>」の位置は「</body>」タグの直前です。

もし自分の作っていたテーマのこの位置になかった場合はこれが原因ですので、それぞれの位置に正しく挿入してくださいね。

WordPress標準の jQuery ではないものを読み込んで使用している

WordPressのテーマを自作していて、javascriptプラグインを使用する場合に最新版のjQueryを読み込まないと動かないものがあります。

その際に「</body＞」の直前にこのようにして読み込んでいると「Contact Form 7 add confirm」が動かなかったです。

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WordPressテーマ</title>
<?php wp_head(); ?>
</head>
<body>

<?php wp_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

なので、上を修正してこのようにして「<?php wp_head(); ?>」より上にjQueryの読み込むようにするだけでOKです。

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WordPressテーマ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php wp_head(); ?>
</head>
<body>

<?php wp_footer(); ?>
</body>
</html>

私の場合は、この2点をチェックすることで「Contact Form 7 add confirm」が動くようになりました！

もし「Contact Form 7 add confirm」が動かなくなったら、