【Mautic】フォームへのアダプティブプレースホルダーの実装と考察

Mautic
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Mauticでコンタクトを集めるにあたり、フォームを作って設置するのは必須施策だと思います。個人情報を取得するには、ダウンロード資料を用意したり問合せに繋がりやすい事例を掲載したりとコンテンツ側の準備も必要ですが、肝心のフォームが使いづらいと、入力途中で離脱したくなります。

EFO(Entry Form Optimization:エントリーフォーム最適化)という言葉も珍しくなくなりましたが、要はUIで心理的&作業的負担を軽減しましょう、という事ですね。ABテストからEFOツール利用まで、さまざまな対策が進む昨今ですが、今ちょっと「アダプティブプレースホルダー」の実装について気になっています。

アダプティブプレースホルダーとは

プレースホルダーは、事前にフォームへ入力されている記入例のことです。HTML5から、inputなどでplaceholder属性が用意され、電話番号やメールアドレスなどの入力例やヒントを簡単に記載できるようになりました。入力する際には消えるものですが、該当する入力欄がフォーカスされても、プレースホルダーが動的に残るのが、アダプティブプレースホルダーです。

アダプティブプレースホルダー

電話番号のハイフンの有無や全角半角などの入力条件は、欄下に配置するよりも気づきやすく間違えにくくなるとも思える一方、プレースホルダーを使用すること自体に否定的な意見もあります。

https://u-site.jp/alertbox/form-design-placeholders

マーケティングオートメーションにおいてフォームはかなり重要な役割となります。メールアドレスだけのものから企業情報をかなり収集するものまで用途は幅広いが故に、どうあるのがよいのか?を一度整理したく、情報収集をしてみました。

利用を進めている例

UX MILK

登録フォームのユーザビリティを向上させる5つのポイント

ユーザビリティに関するテクニックを日々取り上げている「UX MILK」では、登録フォームのユーザビリティ向上に関してプレースホルダーをアダプティブにする事を推奨する記事を掲載しています。その前後の項目も併せてみると、フォームの項目数を減らす事や色を使って状態を示すなども上げています。このあたりの要素と組み合わせて導入するのは、効果が高そうです。

利用をそこまで進めていない例

Website Usability Info

ユーザーの入力に適応して動くプレースホルダー

ユーザビリティとあわせてアクセシビリティに関する考察もしている「Website Usability Info」では、アダプティブプレースホルダーの常套手段である「ラベルのプレースホルダー化」について、アクセシビリティに対する懸念があげられています。確かに、入力してしまったあと、その欄が何の欄か?を説明するものが消えたり見えにくくなる事は、あまり推奨できるものではないですね。

ストレスや記憶性を助けるつもりが、情報が見え隠れすることにより逆に損なわれるケースが懸念されているようです。

現段階で整理すると、ラベルはあくまでラベルとして定常的に表示させておき、入力形式などのヒントはアダプティブを利用しながら入力負担を減らす、というのが良いのでは?と思いました。

Mauticに実装してみる(input、かつWebkitのみ)

WEB懐石では、ファイルのダウンロードURLを送信する際にMauticのフォーム機能を使っています。取得するのはメールアドレスのみですので、このメールアドレス入力欄にアダプティブプレースホルダーを実装してみます。

1. Mautic側での設定

Mauticのフォーム編集画面でメールアドレス欄を編集すると、「インプットのプレースホルダー」という項目があります。こちらに表示したい文言を入力します。

mautic_placeholder

2. フォームの設置

Mauticでは、JavaScriptタグ1つでフォームを埋め込む事が推奨されています。今回もその方法で大丈夫です。サイトにフォームを埋め込んでください。

3. CSSの適用

input欄がフォーカスされたらプレースホルダーを上部に移動&小さくさせるには、

  • inputの擬似クラスとなるplaceholder属性に対し
  • transformプロパティで移動&小さく
  • transitionプロパティでその変化時間

を設定します。少し厄介なのは、placeholder自体にベンダープレフィックス対応が必要で、WebkitやMozillaそれぞれで挙動が違う&設定の可否がありそうな感じです。実装コードは下記のサイトを参考にしたのですが

https://circleci.com/blog/adaptive-placeholders/

事例はWebkitのみ。Moz対応を色々試みたもののうまく行かなかったので、自分もWebkitのみでとりあえず割り切ります…。やる意味あるのか?という。

Mauticのフォームには、「.mauticform-input」などのクラスが当てられているので、それにtransformとtransitionをあてました。そうしてできたのが、下記のフォームです。

せっかくなので、CSSソースをダウンロードできるようにしておきました。コピペすればChromeとSafariで動作確認できると思います。ご自由にカスタマイズしてください。Mozilla対応できた人は、ぜひ教えて欲しいです。。

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone