WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

EFO - お問い合わせフォーム最適化

作例
https://codepen.io/yachin29/pen/ZEBNENN



EFO(Entry Form Optimisation)は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。
対面でのサービスが難しくなった今日「お問い合わせフォーム」の価値はこれまで以上に重要になりました。
ユーザーにとって、ストレスのかからないフォームを作る事が求められます。

問い合わせ時に必要な項目のみに限定する

企業側は多くの情報を取りたがりますが、目標が達成出来る必要最低限の項目のみでOK

スマホでタップしやすいデザインに

スマートフォンで問い合わせするユーザーも多いです

入力内容に合わせてtype属性を指定する

適切なtype指定をする事で入力時のストレスが緩和されます

入力時間を減らす自動補完機能を使えるようにする

HTMLのautocomplete属性を指定する事で、ブラウザへ設定した情報を利用したオートコンプリート機能(入力内容の自動補完)が利用できるようになります。




pulpxstyle.com



ics.media


正規表現をつかったセレクタ指定

正規表現とは、文字の組み合わせを照合するために用いられるパターンです。cssセレクタ指定時に正規表現を使う事で複数のクラス名に依存しない、より柔軟な指定が可能になります。

<h2 class="title-1">見出し1</h2>
<p class="txt-1">テキスト1</div>
<p class="txt-2">テキスト2</div>
<p class="txt3">テキスト3</div>
^(キャレット)は前方一致
[class^="box"]{

}
$は後方一致
[class^="1"]{

}
*は部分一致
[class*="-"]{

}

webliker.info