コンバージョン率を上げるためには、フォームの改善が重要な要素となってきます。
ユーザーにとって使い勝手の悪いフォームだと、せっかく商品やサービスに興味を持ってもらえたのにフォーム画面で離脱や遷移を起こしてしまう可能性も大いにあります。
そこで、今回はフォームのユーザビリティを向上させるためのHTMLやCSSでできるちょっとしたテクニックをいくつか紹介します。
ラベルを活用する
labelタグはfor属性を使うことで単なるラベルとしてではなく、真の価値を発揮します。
for属性に関連する項目のidを入力することで、ブラウザでラベルの文字部分をクリックしても、その項目のテキストにフォーカスされるようになります。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">お名前</label><br>
<input type="text" class="form-items" id="name"><br>
<label for="email">メールアドレス</label><br>
<input type="email" class="form-items" id="email"><br>
<label for="message">メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message"></textarea><br>
<button type="submit">送信</button>
</form>
テキスト欄に入力する内容の例やヒントを表示する
html5で登場したplaceholder属性を活用することでテキスト欄に入力する内容の例やヒントなどを表示することができます。
入力を開始すると文字は消えるため、わかりやすいフォーム作りにはもってこいの属性です。しかし、IE9以前のブラウザでは対応していません。
解決策としては、jQueryのプラグイン「ah-placeholder.js」を読み込むことでIE9以前のブラウザにも対応することができます。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">お名前</label><br>
<input type="text" class="form-items" id="name" placeholder="Enter name"><br>
<label for="email">メールアドレス</label><br>
<input type="email" class="form-items" id="email" placeholder="Enter your mail address"><br>
<label for="message">メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message" placeholder="Enter contents"></textarea><br>
<button type="submit">送信</button>
</form>
現在選択されている入力欄をわかりやすくする
:focus擬似クラスを使うことで、フォーカスされた要素にスタイルを適用することができます。
入力中の項目の背景色を変えることによって、ユーザーが今どの項目を入力しているのかわかりやすく表示させることができます。
また、inputタグの中にautofocus属性を記述することで、ページを開いた時にその項目が最初からフォフォームの先頭の項目などにつけておけば、ユーザーとしてはマウスで入力欄をクリックする手間が省けます。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">お名前</label><br>
<input type="text" class="form-items" id="name" autofocus><br>
<label for="email">メールアドレス</label><br>
<input type="email" class="form-items" id="email"><br>
<label for="message">メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message"></textarea><br>
<button type="submit">送信する</button>
</form>CSS
.form-items:focus{
background-color: #faefe1;
}
入力必須項目を作る
入力必須項目を作ることで、ユーザーが大事な項目を見落としてフォームを送信するミスを防ぐことが出来ます。inputタグやtextareaタグにrequiredの属性を追加することで入力必須項目とすることができます。
送信ボタンを押した際に、項目が未入力であればポップアップで必須入力のメッセージを促してくれる便利な機能です。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">必須：お名前</label><br>
<input type="text" class="form-items" id="name" required><br>
<label for="email">必須：メールアドレス</label><br>
<input type="email" class="form-items" id="email" required><br>
<label for="message">必須：メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message" required></textarea><br>
<button type="submit">送信</button>
</form>
入力内容の確認を行う
invalid,valid擬似クラスを活用することで、送信ボタンを押した際に入力の形式が誤っていた場合、要素にスタイルを適用することができます。
例えば、その項目の背景色を変えてユーザーにどの項目が間違っていたのかわかりやすく表示することができます。
invalidのみを使うと項目を修正したときに背景色が戻らないため、validも設定しておく必要があります。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">お名前</label><br>
<input type="text" class="form-items" id="name"><br>
<label for="email">メールアドレス</label><br>
<input type="email" class="form-items" id="email"><br>
<label for="message">メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message"></textarea><br>
<button type="submit">送信</button>
</form>
CSS
input[type="email"]:invalid{
background-color:#ff8181
}
.form-items:valid{
background-color:transparent;
}
入力する箇所が多い場合は区切りをつける
入力する箇所が多いフォームは、fieldsetタグでグループ化すると見やすくなります。また、legendタグでグループ化した項目のタイトルを書くとよりわかりやすくなります。
注意する点は、legendタグはfieldsetの開始タグの直下に用いるルールがあるため気をつけましょう。
<h1>お問い合わせ</h1>
<form role="form" action="#" method="post">
<label for="name">お名前</label><br>
<input type="text" class="form-items" id="name"><br>
<label for="email">メールアドレス</label><br>
<input type="email" class="form-items" id="email"><br>
<fieldset style="width:200px; margin: 10px 0px;">
<legend>身長と体重</legend>
<label for="height">身長</label><br>
<input type="number" class="form-items" id="height">cm<br>
<label for="weight">体重</label><br>
<input type="number" class="form-items" id="weight">kg<br>
</fieldset>
<label for="message">メッセージ</label><br>
<textarea class="form-items" rows="10" cols="30" id="message"></textarea><br>
<button type="submit">送信</button>
</form>
郵便番号から住所を自動検索
いくつか方法はありますが、最も簡単なのはjQueryプラグインのajaxzip3を利用する方法が最も簡単です。
まず、bodyの閉じタグの直前に下記のコードを貼り付けます。
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
次に、フォーム内に郵便番号と住所のinputタグを記述します。
<label for="mail_number">郵便番号</label><br>
<input type="text" id="mail_number" name="first-number" size="4" maxlength="3"> － <input type="text" name="next-number" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('first-number','next-number','address','address');"><br>
<label for="address">住所</label><br>
<input type="text" name="address" id="address" size="40"><br>
設定はたったこれだけです。
これで、郵便場号を入力した時点で自動的に住所が入力されます。
いかかでしたか？
作業としてはものの1~2分、たったひと手間加えるだけでフォームのユーザビリティは劇的に改善されることもあります。
フォームは成果に繋げるための最も重要なページなので、ユーザーにとって扱いやすい構成を心がけていきましょう。
