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;
}

-----ここマデ---------------------------------

このくらいの手間で以下ができるようになります。
もっとかわいい画像とかメッセージにするとインパクトがあっていいかな。