Secura Vita

Category: Works > wordpress » Contact Form 7:サンクスページ(完了画面)を作成し、送信完了時にジャンプさせる
2016/03/11
Works

Contact Form 7:サンクスページ(完了画面)を作成し、送信完了時にジャンプさせる

Contact Form 7:サンクスページ(完了画面)を作成し、送信完了時にジャンプさせる

Contact Form 7でフォームを送信した時に出る「あなたのメッセージは送信されました。ありがとうございました。」ってなんだか味気ないですよね。

Contact Form 7:サンクスページ

テキストは変更できますし枠線もCSSで変えれるんですがもうちょっと凝りたいところ。

そこで送信完了のページを別に作成し、送信完了した際はそのページヘ飛ばすということをやってみました。

スポンサーリンク

送信完了ページを作成する

ここは普通に固定ページで作成します。

スラッグは「contact-after」にしておきますね。適当に変えて下さい。

Contact Form 7:サンクスページ

Contact Form 7の設定

フォーム設定画面のタブ「その他の設定」にコードを追加します。

on_sent_ok: "location.href = 'http://securavita.net/demo/contact-after/';"
on_sent_ok: "return;"
Contact Form 7:サンクスページ
  • location.href
    ここに飛ばしたいURLを書きます。実際作ったURLに変えてください。
  • return
    これはいらないっちゃいらないんですが、これを書いとかないとページが切り替わる際一瞬「あなたのメッセージは送信されました。ありがとうございました。」というテキストが表示されます。
    なんだか気持ち悪いのでreturn書いて処理を終わらせてます。

以上で完了!

Contact Form 7:サンクスページ

実装する際は「ちゃんとエラー表示されるか」「ちゃんとメールが送られるか」っていうのをテストしてくださいね。

サンクスページについて

このページは意味のないページになりますので、なるべく検索エンジンにはインデックスさせないほうがいいです。

そこまで気にしなくてもいいかもしれませんが気になる人はこの処理もやっておいて下さい。

PHPに直接書く

header.phpの<head>~<head>内に書いて下さい。

<?php if( is_page( 'contact-after' ) ) : ?>
<meta name="robots" content="noindex">
<?php endif; ?>

プラグインで設定

All in One SEO使ってる人も多いと思うので、それでも設定できます。

Contact Form 7:サンクスページ

Google XML Sitemapsを使ってる場合

sitemap.xmlにも含ませないほうがいいと思うので下記箇所で該当の記事IDを入れておいてください。

Contact Form 7:サンクスページ
スポンサーリンク
おもしろかった・役に立った