Contact Form7 送信完了後の画面について サンキューページ

お問い合わせ用のプラグイン Contact Form7 について
友人から、「お客さんが問い合わ送信完了したあと、よく画面が切り替わって”ありがとうございました”とかってなるじゃん。あれにしてほしい」
という依頼がありました。
サンキューページ
っていわれるやつですね。
たしか、Contact Form7 で送信完了後ページ遷移させるっていう記事をどっかでみことがあるので、早速調べてみたところ、ある文献を見つけました。
● 彼らは Google Analytics でフォーム送信をトラッキングするために「サンキューページ」へのリダイレクトが必要なのだと思い込んでいる。時代遅れの無意味な慣習といっていいと思います。実際、リダイレクトなどしなくても Google Analytics でフォーム送信をトラッキングできるのですから。
むむむっ。なんか上から目線の文書。まぁトラッキングのためではないのだけど、「サンキューページに遷移」っていう考え方を少し変えてもいいかも。と思いこんな風にしてみました。
● 現在の状態 (送信ボタンを押下すると、送信ボタンの下に緑枠でメッセージが表示される)
●結果の状態 (項目を非表示にして、別のリンクなどを表示)
管理画面 > 問い合わせ > 対象のコンタクトフォームを新規作成か編集で開く
赤字は送信ボタン押下後、非表示にする部分
緑字は送信ボタン押下前には表示される、押下したら表示される部分
—–ここから———————————
<div class=”b-trans”>
<p>なまえ<br>
[text text-556]</p>
<p>メールアドレス<br>
[email email-93]</p>
<p>質問内容<br>
[textarea textarea-591]</p>
<p>[submit]</p>
</div>
<div class=”a-trans”>
<p>Facebookもやってます<br>
<a href=”http://ooza8.com/”>
<img src=”ninja.jpg” width=”120%” height=”120%”></a></p>
</div>
—–ここマデ———————————
保存してください。
次はstyle.cssを開きます。(念のためバックアップは忘れずに)
以下を追加してください。
—–ここから———————————
.sent .b-trans { display: none; } .a-trans{ display: none; } .sent .a-trans{ display: block; } -----ここマデ--------------------------------- このくらいの手間で以下ができるようになります。 もっとかわいい画像とかメッセージにするとインパクトがあっていいかな。
この記事へのコメントはありません。