皆さんこんにちは、サポート部の山本です。厳しい残暑もやっと終わりを迎え、逆に朝晩の冷え込みが強くなってきています。気温の変化は体調を崩す要因にもなりますので、皆さん気をつけて下さい。

さて今回はECサイトでもよく使われている「フォーム」を簡単に入力しやすく装飾できる方法をご紹介したいと思います。

様々な場面で使われる「フォーム」

ECサイトではメルマガ登録フォームや問い合わせフォーム、注文者情報入力フォーム等、さまざまな場面で利用されています。今回はCSSだけでフォームを簡単に装飾してみます。

まず初めに以下URLを見てください。
https://ssl.aispr.jp/yamay/form/inquiry/

シンプルですが、いかにも地味でフォーム欄も小さく入力しやすいとは言えないですね。これをベースに装飾していきましょう。

フォーム入力エリアを広げる

まずは以下を追記してテキストインプットとテキストエリアの基本装飾をしましょう。

input[type="text"],
textarea {
	padding: 0.8em;
	outline: none;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
}
textarea {
    width: 300px;
}

これだけでも随分見やすくなりましたね。

フォーカスしたときに入力欄の色を変える

以下を追加することで入力欄を選択しているときに、そのスタイルを変更することができます。

input[type="text"]:focus,
texture:focus {
	box-shadow: 0 0 7px #3498db;
	border: 1px solid #3498db;
}

下図のような感じです。

自分が今どのエリアで入力しているのかがわかりやすくなります。

フォーカスした時に入力欄の幅を伸ばす

次に以下を追記するとフォーカス時、入力欄の幅をアニメーションで伸ばすことができます。

input[type="text"] {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	width: 200px;
}
input[type="text"]:focus {
	width: 300px;
}

下図のように入力フォームの横幅が、フォーカスしてるときに伸びます。

確認（送信）ボタンを押しやすく

最後はフォーム内容を送信する際のボタンを大きくまた押しやすく調整してみます。CSSは以下を追加してください。

input.sysNextSubmit {
	border-radius: 0;	
	background: -moz-linear-gradient(top, #FFF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
	border: 1px solid #DDD;
	color: #111;
	padding: 10px 30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
input.sysNextSubmit:hover {
	background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}

小さすぎるとタップしにくいので大きめにしておきましょう。

実装完了

できあがりが以下URLです。
https://ssl.aispr.jp/yamay/form/toiawase/
シンプルですが、入力しやすく分かりやすいフォームになったのではないでしょうか。

CSSでの装飾はもちろんですが、以下のようにHTML側での制御でより使いやすいフォームにカスタマイズすることも可能です。
テキスト入力・メニュー選択どちらもできるdatalist要素を使ったフォームの作り方

まとめ

フォーム周りの装飾は、ショッピングカートにとって重要です。ショッピングカートでは情報入力画面の離脱率が非常に高いこともあり、フォームはしっかり作りこんでいく必要があります。

しかし、情報入力ページのようなセキュアなページに関してはCSSを触れないカートも多く存在し、上記のような編集を行えないこともあります。このような改善でCVRが伸びることも大いにあるので自由度が高いプラットフォーム選びは今では必須になっています。

そのような機能性があるプラットフォームを比較していますので合わせて読んでみてください。
ECサイトショッピングカート比較のポイント【図解】

少しでもユーザーにストレスを与えないようなフォームを目指しましょう。

山本