Contact Form 7で完了画面を表示する2つの方法

件名のとおり、Contact Form 7の完了画面について言及する記事なのですが、

 

Contact Form 7ってなに？

 

っていう方のために簡単にご紹介します。

 

WordPressのプラグインで、インストールするだけでお問い合わせフォームが利用できる優れものです）

 

そんな便利なプラグインなのですが、Contact Form 7には問い合わせフォームには必ずといっていいほど存在する完了画面がありません。

今回は、Contact Form 7で完了画面を用意する方法について説明します。

 

なお、なぜ完了画面を用意するかについては、Contact Form7で確認画面で触れています。

「そういえば何で完了画面なんて用意するんだっけ？」という方は、そちらを参照してください。

 

実装方式

方式としては、以下の2つがあります。

• 送信完了後、完了画面にリダイレクトする。
• 送信完了後、入力フォームを非表示にする。

 

どちらの方法でも目的は達成できます。

以下にて実装方法を紹介しますので、自分のサイトにあった方法を選択してもらえればと思います。

 

実装方法

では、実装方法です。

順番に説明していきます。

 

送信完了後、完了画面にリダイレクトする

この方法は、あらかじめ固定ページで完了ページを作成し、送信完了のアクションをフックに完了ページへリダイレクトさせるというものです。

 

Contact Form 7はAjaxを利用しているので、非同期でアクション結果を取得できるのでそれを利用します。

 

まず、固定ページを作成します。

ここでは、「送信完了」というページで、URLを「contact-finish」としています。

次に、Contact Form 7で作成した問い合わせフォームの管理ページにアクセスし、一番下の「その他の設定」に送信完了（成功）のアクションを受けてリダイレクトの記述をします。

 

記述するソースは、

 

on_sent_ok: "location = 'リダイレクト先URL';"

 

です。「リダイレクト先URL」は自身で設定してください。

終わったら保存します。

 

 

ここでは先ほど作成した固定ページにリダイレクトさせたいので、

 

on_sent_ok: "location = 'http://penguinweb.net/contact-finish';"

 

としています。

 

最後に確認です。

 

Contact Form 7で作成したフォームにアクセスし、メッセージを送信します。

 

送信が成功すると、従来どおり、送信完了メッセージが表示されます。

 

1秒ほど待つと、

 

以下の画面キャプチャのとおり、指定したページへリダイレクトされます。

 

ただし、注意点としてナビゲーションに固定ページを表示させていると、 オレンジの枠の箇所のとおり問い合わせしていなくても送信完了ページへのリンクが見えてしまいます。

 

固定ページのIDを指定して表示しないようにしておきましょう。

 

送信完了後、入力フォームを非表示にする。

こちらの方法は、完了画面を表示させるわけではありません。

 

正しくは、送信完了時に入力フォームを消して、送信完了メッセージだけにすることで、送信完了ページっぽくするというものです。

 

以下の画面キャプチャのオレンジの枠が非表示になったものがゴールイメージです。

 

それでは、説明します。

 

コンタクトフォーム管理画面のフォームにて、送信完了後、非表示にしたい部分をdivでくくり、任意のclassを指定します。

 

ここでは、下の画面キャプチャのオレンジの枠のとおり、<div class=”contact-input-area”>というタグを記述しています。

 

次に、CSSで送信完了時に、contact-input-areaのクラスを非表示にするように指定します。

 

Contact Form 7は上記で説明したとおりAjaxを利用しているので非同期でアクション結果を取得できます。

 

WordPressは普通に使っていれば、スタイルシートは、style.cssを読み込んでいると思いますので、そちらに

 

.sent .contact-input-area{
    display: none;
}

 

と記述してください。

 

これで準備は完了です。表示テストをしましょう。

 

Contact Form 7で作った、問い合わせフォームに入力して、送信をクリック。

 

すると、以下の画面キャプチャのとおり、ゴールイメージと一致しました。

（例だと、固定ページにもコメント入れられるようになっていますが、不要なので消しましょう。後で消しておきます。ページ一番下に削除した画面のキャプチャを貼りました。）

 

まとめ

別記事で紹介した、Contact Form7で確認画面を感じた違和感から始まり、今回で解消にいたりました。

 

2案紹介しましたが、どちらが良いかといえば、後者である「送信完了後、入力フォームを非表示にする」 です。

理由は、「送信完了後、完了画面にリダイレクトする」だと

• 固定ページが増える
• 送信完了後、リダイレクトされるまでにタイムラグがある

 

というデメリットがあるためです。

 

今回の目的達成とは別の視点ですが、送信完了ページで複雑な要素を配置したい（例えば、別ページに回遊を促すテキスト・画像・リンクなど配置する）といったケースであれば固定ページを作ったほうが自由度は高いです。

 

ビジネスニーズとユーザニーズとで天秤をかけて、実装方法を検討すればよいかと思います。

 

また、Google Analytics でフォーム送信をトラッキングしたいということであれば、プラグイン公式サイトに方法がありますのでそちらを参考にしてください。
http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

 

追記

コメント欄を非表示にすると、以下のようになります。

かなり寂しいので、送信完了したらテキストが表示されるようにするとよいかと思います。