ContactForm7に確認画面はない!の対処方法。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

ContactForm7に確認画面はない!の対処方法。

お問い合わせ

ContactForm7に確認画面はない!の対処方法。

Contact Form 7には確認画面、サンクスページはない。

かつてはよく見たサンクスページ。
だがそもそも、サンクスページは必要だろうか?

お問い合わせフォーム。Contact us

Contact Form 7のありがたさ。

ほとんどのホームページにはお問い合わせ用のページが用意されている。
そのページにお問い合わせ先の電話番号が無くても、お問い合わせフォームは必ずと言って良いほど準備されている。

それほど、お問い合わせフォームというのはサイトには欠かせないものだ。

多くのホームページはWordPressという有名なCMSで構築されている。
そのサイトのお問い合わせページには、「Contact Form 7」というこれまた有名なプラグインが利用されている。

それほど、Contact Form 7というのはサイトには欠かせないのものだ。

何より、WordPressもContact Form 7も、無料で使用することができる。Webデザイナーにとっては非常にありがたいツールだ。
感謝を忘れてはいけない。


お問い合わせフォームに、確認画面、サンクスページは必要だろうか??

昔はよく見た上、作り手としてもよく作ったサンクスページだが、Contact Form 7では実装されていない。
ありがたきContact Form 7の開発者であるTAKAYUKI MIYOSHIさんは、サンクスページの必要性の無さをはっきりと公言している。

引用元サイト:送信後に異なる URL にリダイレクトさせるには


近年では逆に確認画面は不要という要望の方が多かった気がする。スマホが普及してからはなおさらに。

また、クライアントの方からも、確認画面を無くして欲しいという要望を受けたことも何度かあった。

名前や住所、連絡先などを入力した後に、その下にあるボタンを押すと、ユーザー側としてはそれで送信したと思ってしまう、という理由からだった。

入力内容の確認は、スパム対策のためのチェックボックスで一石二鳥的に代用できるため、画面遷移を伴うサンクスページはなおさら必要性が無くなっていった。

スマホでつかいづらい。ContactForm7に確認画面はない。

上記の通り、Contact Form 7ではデフォルトでサンクスページが実装されていない。開発者のページでは、時代遅れの無意味な慣習といっていいと思う、とまで記載されている。潔く、個人的には完全同意だ。

確認画面を追加するための、サードパーティ製の「Contact Form 7 add confirm」というプラグインもあったが、それも4年前から開発が止まっている。

Contact Form 7は、入力不備があった場合や送信完了のメッセージは画面にしっかりと表示される。しかも文章も簡単にカスタマイズできる。自動返信の設定も優しい作りとなっているので、至れり尽くせりだ。

これがわかりにくいとなると、プラグインではなく、近年問題視されてもいる「読解力」の問題ではないだろうか。

アメリカ合衆国ホワイトハウスのサイトもWordPressで構築されユーザービリティにも配慮された設計だが、見た感じではお問い合わせページに確認画面が実装されていない。(迷惑になるので実際に問い合わせてはいないが、フォームのボタンは「Send」となっている。)


ユーザビリティ的にContact Form 7をカスタマイズするのならCSSで十分では?

Contact Form 7の送信ボタンを押すと、formタグに自動的に「sent」というクラスが付く。これを利用すると、入力フォームを消すことが出来る。

これを知ると、めちゃくちゃ簡単だ。

参考サイト:Contact Form 7 の送信完了画面を分かりやすく表示させるカスタマイズ方法

例えば、次のようにCSSファイルに追記するだけでOK。

form.sent p {
 display: none;
}

このカスタマイズは当サイトでも実装しているが、送信すると下記のような画面となる。


お問い合わせフォームの入力画面例。

問い合わせフォームの入力画面。


送信完了の画面例。

Contact Form 7をカスタマイズした送信完了の画面。

フォームの見た目をdlを使用してデザインしているので、送信完了画面での最低限必要なCSSの追記は下記の通り。

form.sent dl,
form.sent p {
 display: none;
}

とても簡単で、使い勝手も良い。
Contact Form 7は長年の実績もあり、アップデートもコツコツとされているのでセキュリティー面での信頼性もある。


プラグイン公式ページ。

Woedpress Contact Form 7(コンタクトフォーム7)

引用元:WordPress.org
プラグインのページ:Contact Form 7

Takayuki Miyoshiさんという日本人の方が開発者であり、世界でも活躍しているプラグインです。
いつもお世話になっています。感謝です。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。