![Webpla[ウェブプラ]](https://www.webpla.jp/wp-content/uploads/2020/02/logo_webpla_bk_s.png.webp){kind=logo}
Mauticでコンタクトを集めるにあたり、フォームを作成しWebサイトに設置するのは必須施策です。リード情報を取得するには、問合せに繋がりやすい事例を掲載したり、ダウンロード資料を用意したりと、コンテンツ側の準備も必要ではありますが、肝心のフォームが使いづらいと入力途中で離脱を発生させる原因になります。
「EFO」（Entry Form Optimization：エントリーフォーム最適化）と呼ばれる離脱防止策は、極端に言えば「UIで心理的＆作業的負担を軽減する」という事です。郵便番号から住所を自動入力する、エラーは入力直後にエラーと分かるようにするなど、さまざまな対策がかんがえられますが、今回は「アダプティブプレースホルダー」の実装について考えます。
アダプティブプレースホルダーとは
プレースホルダーは、事前にフォームへ入力されている記入例のことです。HTML5から、inputなどでplaceholder属性が用意され、電話番号やメールアドレスなどの入力例やヒントを簡単に記載できるようになりました。入力する際には消えるものですが、該当する入力欄がフォーカスされても、プレースホルダーが動的に残るのが、「アダプティブプレースホルダー」です。
電話番号のハイフンの有無や全角半角などの入力条件は、欄下に配置するよりも気づきやすく間違えにくくなるとも思える一方、プレースホルダーを使用すること自体に否定的な意見もあります。
[sc_Linkcard url=”https://u-site.jp/alertbox/form-design-placeholders”]マーケティングオートメーションにおいて、フォームはかなり重要な役割となります。メールアドレスだけのものから企業情報をかなり収集するものまで用途は幅広いが故に、どうあるのがよいのか？を一度整理したく、情報収集をしてみました。
利用を進めている例
UX MILK
[sc_Linkcard url=”https://uxmilk.jp/47018″]ユーザビリティに関するテクニックを日々取り上げている「UX MILK」では、登録フォームのユーザビリティ向上に関してプレースホルダーをアダプティブにする事を推奨する記事を掲載しています。その前後の項目も併せてみると、フォームの項目数を減らす事や色を使って状態を示すなども上げています。このあたりの要素と組み合わせて導入するのは、効果が高そうです。
利用をそこまで進めていない例
Website Usability Info
[sc_Linkcard url=”http://website-usability.info/2014/05/entry_140526.html”]ユーザビリティとあわせてアクセシビリティに関する考察もしている「Website Usability Info」では、アダプティブプレースホルダーの常套手段である「ラベルのプレースホルダー化」について、アクセシビリティに対する懸念があげられています。確かに、入力してしまったあと、その欄が何の欄か？を説明するものが消えたり見えにくくなる事は、あまり推奨できるものではないですね。
ストレスや記憶性を助けるつもりが、情報が見え隠れすることにより逆に損なわれるケースが懸念されているようです。
現段階で整理すると、ラベルはあくまでラベルとして定常的に表示させておき、入力形式などのヒントはアダプティブを利用しながら入力負担を減らす、というのが良いのでは？と考えています。
Mauticに実装してみる（input、かつWebkitのみ）
WEBPLA[ウェブプラ]では、ファイルのダウンロードURLを送信する際にMauticのフォーム機能を使っています。取得するのはメールアドレスのみですので、このメールアドレス入力欄にアダプティブプレースホルダーを実装してみます。
1. Mautic側での設定
Mauticのフォーム編集画面でメールアドレス欄を編集すると、「インプットのプレースホルダー」という項目があります。こちらに表示したい文言を入力します。
2. フォームの設置
Mauticでは、JavaScriptタグ1つでフォームを埋め込む事が推奨されています。今回もその方法で大丈夫です。サイトにフォームを埋め込んでください。
3. CSSの適用
input欄がフォーカスされたらプレースホルダーを上部に移動&小さくさせるには、
- inputの擬似クラスとなるplaceholder属性に対し
- transformプロパティで移動＆小さく
- transitionプロパティでその変化時間
を設定します。少し厄介なのは、placeholder自体にベンダープレフィックス対応が必要で、WebkitやMozillaそれぞれで挙動が違う＆設定の可否がありそうな感じです。実装コードは下記のサイトを参考にしました。※Webkitのみ対応
[sc_Linkcard url=”https://circleci.com/blog/adaptive-placeholders/”]Mauticのフォームには、「.mauticform-input」などのクラスが当てられているので、それにtransformとtransitionをあてます。こうしてできたのが、下記のフォームです。
今回のCSSをファイルダウンロードできるようにしました。ChromeとSafariで動作確認しております。ご自由にカスタマイズして利用してください。
