問い合わせフォームの確認画面を表示する理由とその方法 Contact Form 7

WordPressを利用している日本人であれば、

 

問い合わせフォームといったら、Contact Form 7

 

というくらい有名なプラグインがあります。

（海外だとそんなに有名じゃないそうです。やっぱり、日本製のプラグインだからでしょうか）

 

最近だと、jetpackを利用して問い合わせフォームを作るみたいですが、僕は、古くからWordPressを利用しているため、いまだにContact Form 7 を愛用しています。

 

今日は、Contact Form 7をはじめて利用した際に感じた違和感とその解決方法についてお話したいと思います。

 

感じた違和感

10年位前は、問い合わせフォームといったら、

• PHP、Perlでスクラッチ開発
• 無料配布のCGIを利用
• レンタル問い合わせフォームの利用

 

といった方法で実装するのが主流でした。

 

ところが、現在はWordPressを使っていればプラグイン入れるだけで実装出来てしまうとう超便利な時代になりました。

 

そんな古い時代から問い合わせフォームにかかわっていたせいか、実装して使ってみたところ、

 

ん？確認画面がない

 

ということに気が付きました。

 

このことに疑問を感じるユーザは多いと思ったので調べてみました。

 

Google先生に聞いたら10分くらいでWordPressフォーラムに作成者のコメントがあるのを発見できました。

https://ja.forums.wordpress.org/topic/648#post-2936がそのコメントです。

 

ここだけだとわかりませんが、前後の文脈を追うと、「いらない」っていう理由は、WordPressのコメント投稿に確認画面がないからってことらしいです。

 

「確認画面で内容を確認するシーンは、購入などの重要な意思決定が入るときである」とか、そういう理由だと納得しやすいのですが、まぁいいでしょう。

 

とにかくナイのです。

 

ただ、僕の意見としては、

 

学習性という観点からは、「入力→確認→完了」となっているほうがユーザビリティは高い

 

と考えています。

 

なので、この問題の解決方法を探ってみました。

 

解決方法

「Contact Form7　確認画面」で検索したらあっさり見つかりました。

 

なんと

 

Contact Form 7 add confirm

 

という、確認画面を表示するプラグインが存在してました。

なのでこれを利用することで解決にいたりました。

 

以降、実装について説明します。

 

実装方法

管理画面のプラグイン追加にて「Contact From 7 add confirm」で検索して、インストールを実行します。

 

インストールが完了したら、プラグインを有効化します。

 

このプラグインは、Contact form 7 の追加機能なので、左メニューの「お問い合わせ」から作成済みのフォームを選択します。

（左メニューの「設定」から操作できそうですが、出来ません）

 

フォーム設定画面にて、「タグの作成」をクリックすると、下の画面のとおり、「確認ボタン」「戻って編集ボタン」というものが追加されています。

これを選択するとショートコードが取得できます。

 

取得したショートコードは、下の画面のとおりに設定します。

（もちろん記述する箇所はどこでも大丈夫です。実際の画面で表示位置を確認して決めてください）

 

これで、確認画面表示の設定は完了です。

早速、表示確認をして見ます。

 

すると、今まで「送信」だったボタンのラベルが「確認」に変わっています。

値を入力して確認ボタンをクリックします。

 

すると、入力フィールドがグレーアウトされ、「送信」「戻って編集」ボタンが表示されました。

これが入力確認画面となります。

少々、表示が微妙なので、CSSで見栄えを整えるといいと思います。

 

送信をクリックすると、入力値が消えて、送信完了のメッセージが表示されます。

（「戻って編集」をクリックすると、入力画面になります）

 

新たな問題

これで違和感は解消したかに見えますが、新たに

 

完了画面の表示が期待値と違う

 

という違和感があることに気が付きました。

 

そちらは、Contact Form 7で完了画面にて紹介していますのでご覧いただければと存じます。