カテゴリー
WordPressプラグイン

Contact Form7の送信完了画面がでない

※この Contact Form7の送信完了画面についての記事はひと世代前の情報です。最新の Contact Form7の送信完了画面設定方法については、新し記事を書きましたので、そちらで問題解決できるはずです。

Contact Form7へサンクスページをつける（最新版）

お手軽にお問い合わせフォームなどを設置できる Contact Form7。
添付ファイルも送信でき、シンプルで初心者にも使いやすいフォームプラグインです。
もちろん、実際に使っていると「あれもこれも欲しい！」という部分が出てくるのですが、その中でももっとも必要性を感じるのが送信完了画面です。

Contact Form7でオリジナルの送信完了画面を表示する

Contact Form7の送信後はデフォルトではページの最下段に「送信しました」的なメッセージが javascript で出力されるだけ。

わたしも初めに使った時は気がつかず、送信できたかどうか分からなくて何度もボタンを押してしまい、これはいただけないなと思いました。
もちろん、管理者側には実際にメールが届きますし、デバッガなど確認する手段がいくらでもあるわけですが、実は Contact Form7ではちょっとした手順で送信完了画面をつけることができます。

正確には送信完了後、指定のページにリダイレクトさせるというものですが、ユーザビリティを考慮して、実装をお勧めします。

送信完了画面を表示するためのスクリプト

まずは投稿でもページでも構いませんので、送信完了ページを作成します。
この場合は http://example.com/thanks/としました。

続いて、 Contact Form7のフォーム設定の最下段「その他の設定」に下記記述を記入します。

on_sent_ok:"location='http://example.com/thanks/';"

※location にはあらかじめ作成した送信完了ページの URL を入力します。

送信確認画面がうまく表示されないときは

このように簡単な手順で OK なのですが、意外にもうまくいかない方が多いようです。
Contact Form7での送信完了画面の表示ができないという方は下記をチェックしてみてください。

全角文字が含まれていないか

まず、追記したスクリプトに全角文字が含まれていないか確認してください。

誤→on_sent_ok:”location=’http://example.com/thanks/’;”
正→on_sent_ok:"location=’http://example.com/thanks/’;"

いくつかこの手法について説明があったサイトを見てみたのですが、その中に全角が含まれているものが見受けられました。
分かりにくいかもしれませんが、上の例ではダブルクォーテーションが全角になっています。
ありがちな話ですが、やっぱり注意が必要ですね。

ヘッダに WordPress 関数が読み込まれているか

これは自作テーマなどで考えられるパターンですが、お使いのテンプレートに wp_head()というヘッダに記述される WordPress の関数がないというもの。
これ自体、すべてのテーマにおいて必須というわけではありませんが、プラグインはこの wp_head()からの出力を前提に作られているものも多く、 Contact Form7もしかりです。
とくに理由がなければ、 wp_footer()も足しておきましょう。

header.php の</head>の前に

&lt;?php wp_head(); ?&gt;

footer.php の</body>の前に

&lt;?php wp_footer(); ?&gt;

おそらく上記の2点が最も多い理由だと思われます。
これらが該当しない場合は下記のお決まりの手順で原因を突き止めていくしかありません。

  1. テーマをデフォルトに戻す
  2. プラグインを最低限にする

ちなみにこの手法はあくまでリダイレクトなので、一瞬 javascriput メッセージの画面が表示されます。ですので、「# メッセージが正常に送信された」の部分を「送信完了！」などにすれば、リダイレクト前にちらっと見えてもおかしくはないでしょう。

ついでにフォームの見た目をカスタマイズ

ちょっと味気ない Contact Form7のフォームデザインですが、フォーム作成の左のタグ入力画面には以下のような形でテーブルなど html タグなどを使っても大丈夫です。
もちろん送信ボタンに画像なども使用できます。

&lt;table class=&quot;form&quot; summary=&quot;form main&quot;&gt;
&lt;tr class=&quot;seen&quot;&gt;
&lt;th&gt;お名前&lt;/th&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;seen&quot;&gt;
&lt;th&gt;メールアドレス&lt;/th&gt;
&lt;td&gt; [email* your-email] &lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;seen&quot;&gt;
&lt;th&gt;コメント&lt;/th&gt;
&lt;td&gt;[textarea your-message]&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;[submit &quot;送信&quot;]&lt;/p&gt;
profile image

執筆:R3098

WEB サービス構築・監修が生業です。 WordPress 関連では Aurora Heatmap などプラグイン開発も行っています。悩めるサイト運営者の無料相談受付けます！

「Contact Form7の送信完了画面がでない」への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー および 利用規約 に適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。