ContactForm7を『超絶使いやすくする』３つのポイント【見やすい・使いやすい・安心できる】
「ContactForm7で使いやすいフォームを作りたいなぁ。 コツや開発方法がまとまったメモが欲しいなぁ。」
あなたの代わりに情報をまとめました。
使いやすいフォームを作って、コンバージョン率をバク上げしましょう＼(^o^)／
使いやすいフォームとは【３つのポイントで解説】
- その①：見やすい
- その②：使いやすい
- その③：安心できる
基本的にこの３点を抑えておけばOK。 それではさっそくContactForm7を使うことをベースとに解説しますね。
その①：見やすいフォームデザインのコツ
【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】
Contact Form 7を見やすく表示するためのCSSです。コピペ用に作りました。フォームは使いやすさ＆見やすさが命だと思うので、同意出来る方はぜひご利用ください。
基本的には上記記事のCSSで問題ないはず。
注意すべきこと
| 注意点 | 回答（状況によるので参考までに） |
| フォントは十分大きいか？ | 最低でも16px以上はあったほうが良い。 |
| 入力ボックスは十分な広さがあるか？ | height: 50pxはあったほうが良い。 |
| 余白（マージン）は十分にあるか？ | 余白が少ないとスマホの誤タップに繋がる。 |
その②：使いやすいフォーム作成のコツ
- 誤送信を防ぐ機能がある（間違ってエンターキーを押しても送信されないようにする）
- サンキューページがある（ちゃんと送信されたことが分かる）
- 自動送信メールがある（ちゃんと送信されたことが分かる）
誤送信を防ぐ機能の設定方法
[acceptance accept-this] 個人情報の取扱いについて、同意の上送信します。（確認画面は表示されません）フォーム全体としては次のようになります。
<span class="must">必須</span> お名前
[text* your-name placeholder "例）山田 花子"]
<span class="must">必須</span> メールアドレス
[email* your-email placeholder "例）[email protected]"]
<span class="free">任意</span> メッセージ
[textarea your-message placeholder "ご自由にご記入ください。"]
[acceptance accept-this] 個人情報の取扱いについて、同意の上送信します。（確認画面は表示されません）
[submit "送信"]サンキューページにページ遷移させる方法
on_sent_ok: "window.location.href = 'ここにURL';"例えば、サンキューページのURLが『https://example.com/thanks/』なら下記のとおり。
on_sent_ok: "window.location.href = 'https://example.com/thanks/';"※よくあるエラー例：サンキューページに遷移しません…。
JavaScript（特にjQuery）でエラーが出ている場合が多いです。プラグインを大量に入れているとコンフリクトしている可能性があるので、不要なプラグインを止めてみて下さい。
※余談：サンキューページがなくてもアナリティクスのコンバージョン計測は可能です
サンキューページの存在意義をコンバージョン計測の為という人がいますが、そうでもないです。アナリティクスならページ遷移なしでもコンバージョン計測できます。
» コンバージョンページが無いときの成果の取り方
自動返信メールの設定方法
分かりやすくするために設定画面を全部公開。自動返信メールはオレンジ色の部分です。
自動返信メールの設定をしていると「送信先とか送信元って、どっちがどっちだっけ…」と混乱しやすいのでスクショを参考にしていただけたらと。尚、スクショの内容は、下記のサービス想定となっています。
- サービス名：インド人との英会話スクール
- サイトURL：india-eigo.com
- 公式メルアド：[email protected]
ついでに自動返信メッセージの文章もテンプレ公開しておきますね。
この度はインド人との英会話スクールに資料請求して頂き、誠にありがとうございます。 頂戴いたしました内容につきましては、内容を確認のうえ後ほどご連絡させて頂きます。恐れ入りますが、今しばらくお待ち下さいますようお願い致します。 ※このメールは自動返信メールです。ご返信いただいてもお答えできませんので、ご了承ください。ご返信の際は直接 [email protected] までお願いいたします。
よく聞かれそうな質問（リアルタイムバリデーションと送信ボタン連打対策）
ここは関連URLを紹介しておきます。
リアルタイムバリデーションの実装方法
» 【WordPress】Contact Form7にリアルタイムバリデーションを入れる方法
送信ボタン連打対策
» メールフォームの送信ボタン連打対策とブラウザの戻るでの2重送信対策
» jQuery Disable doble submit｜Contact Form 7 よくあるカスタマイズ
その③：安心できるフォーム作成のコツ
オレンジ色の部分です。
当サイトは、 お客様の個人情報について、お客様の承諾がない限り第三者に開示、提供を一切行いません。ご提供いただいた個人情報を取り扱うにあたり管理責任者を置いて、適切な管理を行っております。
個人情報保護については明記が必須かと。電話番号も聞く場合は、セールス電話をしませんといった記載があっても良いと思います。
また、話がすこしずれますが、会社概要ページを作り込むことも大切です。「会社概要ページなんて見られないでしょ」と思う人はアクセス解析をよく見てください。想像以上に見られていると思いますし、信頼をつくる上では重要なページだと思います。会社概要の記載だけではなく、経営者が顔を出し、事業への思いを書くことは必須です。
最後に少し脱線しましたが、今回は以上となります。ユーザーに親切なフォーム作りに励みましょう。