澄んだ青空の公園

お問い合わせフォーム、CSSを使ってユーザーが使いやすく

ユーザーが使いやすいようなフォームにしてみよう

お問い合わせは、デフォルトでよくデザインされていますが、下の様に項目と内容を横並びにして見やすく、重要な所には※印を色を変えて目立つようにして、記入欄も余白を設けたり幅を広くしています、フォームを見やすくすることでユーザービリティの向上に繋がりユーザーがストレスなく入力できるようにしましょう。

こんな感じのフォームをCSSを使って作成する

CSSを使って各項目毎変更を加えて見やすいフォームを作っていきましょう。

htmlに記述してフォームを作ってみる

bodyの中にform要素でお問い合わせを作る

htmlに記述をしてお問い合わせを作ります、body要素内にform要素を記述していきます。

form開始タグにフォーム要素の属性を使って入力したデーターの送信先と送信方法を指定します。

送信先と送信方法を知りたい方はこちらを参考にして下さい。

form要素の内側にフォームの入力エリアなどの要素を入れていきます、お問い合わせを作る場合はdl要素の定義リストを使います。

フォームのhtmlの記述例

ブラウザに表示させると、下のようなお問い合わせができます。

この様にフォームはデフォルトでもよくデザインされていて、そのまま利用することもできますが、フォームはユーザーが操作するものですので使いやすく変更することも大切です。

お問い合わせフォームの一例

項目毎にCSSで見やすいように装飾をする

フォームの幅を指定し左右と上に線を引く

htmlにフォームの記述が終わったらCSSで項目ごとに装飾をしていきます、まず初めに横幅を指定して分かりやすいように左右と上に線を指定します。

CSSファイルを開いてdl要素に対し幅とborderのtopとleftとrightに1px、solid(実線)、色を指定します。

フォームの周りに線を入れて分かりやすいように

この様な表示なりました、左右と上に線が引かれましたこれでお問い合わせの幅が分かり易くなりました。

フォームの一例

要素を横並びにする

今度はdt要素に対してfloat:leftを指定して横並びにしてみましょう。

CSSファイルでdl要素内のdt要素に対してfloat:leftを指定します。

要素を横並びにするためのfloatの記述

dt要素がfloat属性で浮いたのでdd要素がその間に入り込み横並びになりました。

フォームの改良途中の画像、フロートを使ったのでdd要素が回り込んで詰まった感じになる

文字に余白を付けて見た目をよくする

このままでは文字が詰まって見にくいので、dt要素に対してpadding:1em(一文字分)の余白を指定して、少し文字の色を変更してみます。

CSSファイルにパディングとカラーを指定します。

dt要素にパディングと文字に色を付ける記述

カラーの指定方法には数種類あります。

参考にこちらもどうぞ

dt要素の文字の色と大きさが変わりました、配置が崩れてしまいましたが後で修正していきます。

改良途中のフォーム、配置が乱れている。

各項目毎区切りを付ける

項目毎に区切って左右の項目を併せて見た目をスッキリさせてみます。

dl要素内のdd要素に対して、border-bottom(下側)にsolid(実線)を入れて色は他の枠線と同じ色にしています。

配置を修正するCSS記述

marginは各項目の間が開かないように「0」に指定します。

paddingは上に1em(一文字分)、右に0、下に1em(一文字分)、左に18em(18文字分)の余白を作ります。

フォームの見た目を変える、dd要素の左端を揃える

dd要素の左側に18文字分(16ピクセル×18)の余白を取って縦のラインで並んだのが分かります。

重要事項を目立つようにする

絶対入力をしてもらいたい所、重要な事項に対して「※」印をつけましたが、これをもっと目立たせるために色を変えて指定してみます。

先にhtmlの記述で「※」印に対して、<span>要素で囲み、クラス名を「must」にしていますのでCSSファイルの記述で「.must」に対して色を指定します。

クラス名mustの文字の色を変更する記述

※印の所だけが色が変わりました。

メールアドレスの入力欄の幅を広げる

メールアドレスの入力欄の幅を変更するので、input[type="email"] { }に幅のwidthプロパティでdd要素の幅の50%分を指定します。

記述の注意点は「input」の後に続けて[括弧]を記述します、半角スペースを入れると正しく表示されませんから記述には注して下さい。

inputの後にスペースを入れると正しく表示されません。

当初の幅から広くなって長いアドレスも入力できるようになりました。

他の入力欄も広げて文字サイズも変える

入力欄がある「お名前」「フリガナ」と「メールアドレス」の入力の文字サイズと見やすいように文字の周りに余白を設定したいと思います。

各項目ともinput要素で記述しているので

CSSの指定をinput要素で記述します、フォントサイズを一文字分、文字の周りの余白を5ピクセルに指定します。

文字が大きくなって文字の周りに余白ができて見た目も良くなりました。

checkboxとradioボタンの間隔をあける

お問い合わせのボタンや性別の男女のボタンの間隔を広げてチェックしやすいようにしてみましょう。

性別をチェックしてもらう記述

type=”checkbox”もtype="radio”も<label>要素で囲われていますので、CSSはlabelで指定します。

各項目の右側に一文字分の間隔が開いてチェックしやすくなりました。

textareaの入力枠を広げる

textareaを広げてお問い合わせ・ご質問内容を入力しやすいように変更しましょう。

今の大きさは横幅(cols)が25文字分と高さ(rows)が5行分になっています。

textareaに対し幅を30文字分、フォントサイズを1文字分、文字の周りに余白を5ピクセル分を指定します。

この様に横幅と高さが変更されました。

送信ボタンを作る

送信ボタンを作るのはtype="submit"です、ボタンの内容は「value」に書いている文字が表示されます。

この様なデフォルトですのでこれをCSSで装飾していきます。

pのクラス名に「submit」を付けてこれに対してtext-alignで中央に配置して、border-bottomで要素の下側に線を入れます、ボタンと線の間に余白が開くようにpadding-bottomを16ピクセル分余白を取ります。

今度はボタンに対して文字の周りの余白を上下20ピクセルと左右に100ピクセル
背景色を#c66
文字の太さを太字に
文字の大きさを一文字分に
文字の色を白色に
全部の角を15ピクセル分丸める

以上の設定を指定すると以下のようになります。

送信ボタンにカーソルが乗った場合にカーソルの形やボタンの色を変えたい場合は「:hover」を使って「corsor」でカーソルの形を変えます「pointer」は人の手のような形になります。

「opacity」は透過を示し1が全てで小数点で表していきます、ボタンにカーソルが乗ると0.8分ボタンが薄くなります。

label 項目とボタンを関連づける

北海道美瑛の青い池

項目をクリックするとチェックされる様にする

<label>要素でチェックボタンやラジオボタンなどを囲むと項目とボタンなどの構成部品を関連づけることができます。

上の様にlabelで囲まない時は項目をクリックしても変化はありませんが

性別

<label>要素で囲むと

男女の項目をクリックしてもチェックされます、これはチェックボタンでも同様になります。

性別

お問い合わせフォームを使いやすくまとめ

お問い合わせは、デフォルトでよくデザインされていますが、フォームを見やすくすることでユーザービリティの向上に繋がりユーザーがストレスなく入力できるようにしましょう。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事