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

 

お問い合わせ用のプラグイン Contact Form7 について

 

友人から、「お客さんが問い合わ送信完了したあと、よく画面が切り替わって”ありがとうございました”とかってなるじゃん。あれにしてほしい」

という依頼がありました。

サンキューページ

っていわれるやつですね。

 

たしか、Contact Form7 で送信完了後ページ遷移させるっていう記事をどっかでみことがあるので、早速調べてみたところ、ある文献を見つけました。

 

● 彼らは Google Analytics でフォーム送信をトラッキングするために「サンキューページ」へのリダイレクトが必要なのだと思い込んでいる。時代遅れの無意味な慣習といっていいと思います。実際、リダイレクトなどしなくても Google Analytics でフォーム送信をトラッキングできるのですから。

 

むむむっ。なんか上から目線の文書。まぁトラッキングのためではないのだけど、「サンキューページに遷移」っていう考え方を少し変えてもいいかも。と思いこんな風にしてみました。

 

 


 

現在の状態 (送信ボタンを押下すると、送信ボタンの下に緑枠でメッセージが表示される)

Contact Form7 問い合わせ送信後の画面

 

 

結果の状態 (項目を非表示にして、別のリンクなどを表示)

Contact Form7 問い合わせ送信後の画面を変更

 


 

 

 

● コンタクトフォームに少し追記

 

管理画面 > 問い合わせ > 対象のコンタクトフォームを新規作成か編集で開く

 

赤字は送信ボタン押下後、非表示にする部分

緑字は送信ボタン押下前には表示される、押下したら表示される部分

 

—–ここから———————————

<div class=”b-trans”>

<p>なまえ<br>
</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 に少し追記

 

次はstyle.cssを開きます。(念のためバックアップは忘れずに)

以下を追加してください。

 

—–ここから———————————

.sent .b-trans {
display: none;
}
.a-trans{
display: none;
}
.sent .a-trans{
display: block;
}

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

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

 Contact Form7 問い合わせ送信後の画面 結果

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です