0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

標準のテキストメッセージだけでは味気ない。
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;
}

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?