クォリティの高いフォーム制作に便利なマークアップ・CSS・フレームワーク

フォーム作成によくあること

デザインを作成していざフォーム部分を作成しようとした時に「Chromeでは問題なかったのにIEだとCSSが効いてない」「FireFoxだとプルダウンの表示が崩れている」「iPhoneだとボタンの形が違う」と困ることが多いのではないでしょうか?

。また、フォーム部分は動きの部分での挙動も重要となるため、デザインでイメージしたことを形にすると難しいことが多いと思います。フォームを実装するときのコツをまとめました。

マークアップ内容

フォームをデザインする方法としてデフォルトの設定をリセットする方法があります。下記に便利な設定方法をまとめました。

CSSでuser agent stylesheetをリセットする方法

ブラウザ毎に内容が異なる「user agent stylesheet」というデフォルトCSSが原因でうまくCSSが聞かないことがあります。一つのブラウザで正常な表示がされても他では崩れていることがあります。これらをリセットするreset.cssなどがありますがフォームの部分には対応していないものがほとんどなので個別に設定する下記のパラメータをCSSで設定するとデフォルトのCSSがリセットされ、任意で設定された内容が反映されます。

See the Pen reset/default form by psckamei (@psc-kamei) on CodePen.

この設定をした見え方のサンプルです。firefox、IEやiPhoneのブラウザで確認すると違いがわかります。

safariのデフォルトの状態。

safariのデフォルトの状態。


FireFoxのデフォルトCSS

FireFoxのデフォルトCSS


その他の便利なCSSの設定

設定しておくと便利な細かい動きのCSSをまとめました。

入力部分にフォーカス(選択)すると説明テキストが消える

See the Pen placeholder hidden/visible by psckamei (@psc-kamei) on CodePen.

必須項目の判定の設定

下記のように設定するとエラー時はピンク(#FEE)、選択時は灰色(#EEE)、入力が通った時は青(#EEF)になります。またhtml記述のpatternに正規表現で入力条件を指定できます。数字のみ入力可能で設定しています。

See the Pen gXLowM by psckamei (@psc-kamei) on CodePen.

inputの便利な設定方法

inputの便利なマークアップをまとめました。カラーの取得や電話番号判定などもデフォルト機能で実現できます。

See the Pen input variation by psckamei (@psc-kamei) on CodePen.


フレームワークの活用

上記ではHTMLを直に書く方法を記載いたしました。
vue.jsのelementUIというライブラリを利用することでエラー判定の表示やカレンダー入力などを簡単に実装することができます。


ElementUI Form デモ参照

まとめ

普段問い合わせしようとした時に入力しづらくやめたという方も多いと思います。せっかくいい内容の製品やサービスでも細かい部分で結果に繋がらないことが多くあると思います。
お問い合わせを成果指標とするならばフォーム部分を改善するのが一番の近道かと思います。
こちらを参考にユーザビリティが高くデザイン性の高いフォームを作成してみてください。