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」としています。

001

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

 

記述するソースは、

 

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

 

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

終わったら保存します。

002

 

 

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

 

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

 

としています。

 

最後に確認です。

 

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

003

 

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

 

1秒ほど待つと、

004

 

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

005

 

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

 

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

 

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

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

 

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

 

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

006

 

それでは、説明します。

 

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

 

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

007

 

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

 

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

 

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

 

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

 

と記述してください。

 

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

 

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

003

 

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

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

008

 

まとめ

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

 

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

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

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

 

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

 

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

 

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

 

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

 

追記

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

009

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

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

  • Takezone

    良い記事をありがとうございました。
    という記述ですが、ダブルクオーテーションが全角にしておられますでしょうか。
    コピペで使用してみてCSSが反映されずしばし悩みました。
    もしよろしければ半角の”に変更していただくと、私のようなコピペで適用しようと試みる読者にはありがたいかと思います。
    ご検討ください。

    • mislead

      Takezoneさん
      ご指摘ありがとうございます。
      このサイトはCMSで構築しているため、ダブルクオーテーションなどの文字列は表示崩れを起こす可能性が高いため、文章中は意図的に全角にしております。

      今後はコピペ用に配慮するように心がけたいと思います。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...