Help us understand the problem. What is going on with this article?

Contact Form 7 でリッチなサンクス表示をさせる

標準のテキストメッセージだけでは味気ない。
HTMLでがっつり装飾したい、そんな時に。
サンクスページをわざわざ作ってわざわざ飛ばすよりラクだと思うよ。

考え方

単純です。大胆かつ柔軟。
- メールを送信したら、bodyにクラスを付与する。
- そのクラスでサンクス領域を表示する。
- ついでにフォームは隠してしまおう。

実装

メールを送信したら body に wpcf7-mail-sent クラスを付与する。

クラス名はなんでもいいんだけど。とりあえずわかりやすく。

functions.php
add_action( 'wp_footer', 'add_wpcf7_mail_sent_script' );
function add_wpcf7_mail_sent_script() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  document.body.classList.add( 'wpcf7-mail-sent' );
}, false );
</script>
EOD;
}

サンクス内容は投稿内に直接書いておく

WPのPost内
<section class="wpcf7-mail-sent_hide">
<!-- フォーム部分 -->
[contact-form-7 id="123" title="Form"]
</section>

<section class="wpcf7-mail-sent_show">
<!-- サンクス部分 -->
  <h1>Thanks!</h1>
  <img src="thanks.gif">
  <p>Thank you very much !!!</p>
  <a href="/">Back to Top</a>
</section>

フォームを隠さず出したまんまにする場合は、wpcf7-mail-sent_hide を外す。

切り替え用CSS

style.css とか読み込んでるやつに追加しよう。

SCSS
.wpcf7-mail-sent {
  &_show { /* 最初は隠しておく */
    display: none;
  }
  & &_show { /* クラス付いたら表示する */
    display: inherit;
  }
  & &_hide  { /* 今度はこっち隠す */
    display: none;
  }
}

CSS で普通に書くとこう。

CSS
.wpcf7-mail-sent_show {
  display: none;
}
.wpcf7-mail-sent .wpcf7-mail-sent_show {
  display: inherit;
}
.wpcf7-mail-sent .wpcf7-mail-sent_hide  {
  display: none;
}

装飾は、普段通りにどうぞ。
これだとフォームのページが何枚あっても同じパターンでいける。内容もそれぞれ変えられるしね。
飛び先のアドレスだのなんだのの管理もしなくていいし、運用考えてもページ飛ばすよりラクじゃないかな、と。

wakazu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away