【Contact Form 7】チェックボックスにラベルをつけてユーザビリティ向上

コンタクトフォーム7でラベルつきのチェックボックスをつくる方法を紹介します。ラベルをつけるとチェックボックスにチェックをつけやすくなるので、ユーザビリティを向上できます。しかもやり方はとっても簡単!

そもそもラベルとは?

HTMLでフォーム部品をつくるとき、そこに何を入力するべきか、何をチェックするべきか、などを説明するテキストがありますね。例えば「お名前」とか「メールアドレス」とか「性別」とか。ラベル(label)を使うと、このテキストとフォームの部品を関連づけることができます。この状態でテキストをクリックすると関連づけられたフォーム部品が選択されるので、入力しやすい、使いやすいフォームになるのですね。

ラベル有無の比較

下のサンプルは、ラベルがない普通のチェックボックス(上)と、ラベルがあるチェックボックス(下)。「ラベルあり」だとテキストをクリックしたらチェックが入り、「ラベルなし」だと、チェックボックスをクリックしないとチェックできません。実際にクリックしてみると、ラベルありの使いやすさは一目瞭然ですね!

▽ラベルあり

▽ラベルなし
ラベルなし1ラベルなし2ラベルなし3

お名前

チェックボックスをつくる

ラベルがわかったところで、次はContact Form 7でチェックボックスをつくります。Contact Form 7の基本的な使い方はこちらの記事で紹介しているので、わからない方はご参照ください。

チェックボックスのフォームタグ生成

ここではチェックボックスに注目して説明します!

コンタクトフォーム編集画面で「チェックボックス」を選択して、タグ生成画面に必要事項を入力します。

名前は任意の名前で、オプションは1行に1つの選択肢を入れます。IDクラス属性は必要に応じて入れてくださいね〜。

チェックボックスフォームタグ生成画面

ラベル要素を追加する

チェックボックスにラベルをつけるには、下の画像のように「個々の項目をlabel要素で囲む」にチェックを入れます。たったこれだけ!!

その他のオプション

ちなみにその他のオプションを説明すると次のとおり。

ラベルを前に、チェックボックスを後に配置する
文字どおり、チェックボックスがテキストの後ろに表示されるようになります。
チェックボックスを排他化する
選択肢の中でひとつだけ選択して欲しいときにつかいます。

これらも必要に応じてチェックを入れるだけです。自分でコードを書くより遥かに簡単ですね〜。

完成したフォームタグ

チェックボックスフォームタグ

ラベルの付け方は以上です!使いやすいフォームをつくって、ユーザビリティを向上しましょう(^^)