Contact Form 7の送信完了画面をカスタマイズ

ヘッダ画像

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

お手軽にお問い合わせフォームなどを設置できるContact Form 7

添付ファイルも送信でき、シンプルで初心者にも使いやすいフォームプラグインだと思います。
もちろん、実際に使っていると「あれもこれも欲しい!」という部分が出てくるのですが、その中でももっとも必要性を感じるのが送信完了画面です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

header.phpの</head>の前に
<?php wp_head(); ?>
footer.phpの</body>の前に
<?php wp_footer(); ?>

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

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

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

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

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

<table class="form" summary="form main">
<tr class="seen">
<th>お名前</th>
<td>1</td>
</tr>
<tr class="seen">
<th>メールアドレス</th>
<td> [email* your-email] </td>
</tr>
<tr class="seen">
<th>コメント</th>
<td>[textarea your-message]</td>
</tr>
</table>
<p>[submit "送信"]</p>

コメント一覧

  1. ちーた より:

    header.phpの前に
    wp_head()
    footer.phpの前に
    wp_footer()
    が役に立ちました!

コメントを残す

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

関連記事

WordPressのログインユーザー名は丸見え!?

WordPressのセキュリティ対策で必ずいわれるのが、「ログインユーザー名をadmin以外に変更し […]

Contact Form 7のラジオボタンを必須項目に(2017年度版)

今回はWordPressでの超定番のフォーム用プラグインContact Form 7でのラジオボタン […]

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]