【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

CSSだけで入力しやすいフォームを簡単に実装する方法

  • 2016.10.19
  • 2019.05.08
  • 技術
CSSだけで入力しやすいフォームを簡単に実装する方法

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

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

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

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

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

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

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

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

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;
}

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

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

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

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

下図のような感じです。

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

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

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

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

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

確認(送信)ボタンを押しやすく

最後はフォーム内容を送信する際のボタンを大きくまた押しやすく調整してみます。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));
}

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

実装完了

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

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

まとめ

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

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

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

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

山本

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+