表形式のお問い合わせフォームを作ってみよう

Contact Form 7でフォームを作成する際に、「複数のフォームコントロールが単一のlabel要素内に置かれています」というエラーメッセージに悩まされたり、フォームを表形式で作ろうとしたときにlabel要素がうまく使えなかったり、という経験はありませんか?

label要素は、アクセシビリティやユーザビリティを向上させるために重要な役割を果たします。でも、その目的や使い方が理解できていないと、エラーが出たり、使いどころを逃したりしてしまいます。

この記事では、label要素の基礎知識から、実践的な使い方までを解説します。ユーザーにとって分かりやすく使いやすいフォームを作成できるよう、一緒にレベルアップしていきましょう!

label要素とは

その名の通り、フォームの入力フィールドにラベルを付けるための要素です。ユーザーに対して入力フィールドが何のためのものかを説明します。

label要素をフォーム要素と関連付ける

label要素とフォーム要素を関連付けることには、次のようなメリットがあります。

  • 誤入力の防止:ユーザーが入力すべき内容を明確に示すことで、入力ミスを防ぐ
  • ユーザビリティの向上:ラベルをクリックすると入力欄にフォーカスが移るため、操作がしやすくなる
  • アクセシビリティの向上:スクリーンリーダーやがラベルを読み上げることで入力内容を理解しやすくなり、音声入力を利用するユーザーもラベルを使って入力欄をアクティブ化できる

関連付けには2つの方法があります。

方法1:label要素でフォーム要素を囲む

<!-- 一般的なHTML -->
<label>
  氏名
  <input type="text" name="username">
</label>

<!-- Contact Form 7 -->
<label>
  氏名
  [text* username]
</label>

方法2:for属性とid属性を使用する

  1. label要素にfor属性を設定する
  2. フォーム要素にid属性を設定する
  3. for属性とid属性の値を一致させる
<!-- 一般的なHTML -->
<label for="username">氏名</label>
<input type="text" id="username" name="username">

<!-- Contact Form 7 -->
<label for="username">氏名</label>
[text* username id:username]

fieldset要素とlegend要素

Contact Form 7でフォームを作成する場合、誤ったラベル付けによって「複数のフォームコントロールが単一のlabel要素内に置かれています」というエラーメッセージが表示されることがあります。

フォームコントロールとは、input要素、textarea要素、select要素などのフォーム要素のことです。

このエラーを解消するには、以下の2つの方法があります。

  1. label要素を削除する
Your Country
[checkbox your-country use_label_element "China" "India" "San Marino"]
  1. fieldset要素とlegend要素を使用する
    • fieldset要素:関連するフォームコントロールをグループ化し、関連付ける
    • legend要素:fieldset要素の子要素として使用し、そのフィールドセットの内容を説明する見出しまたはキャプションを定義する
<fieldset>
    <legend>Your Country</legend>
    [checkbox your-country use_label_element "China" "India" "San Marino"]
</fieldset>

Contact Form 7のフォームタグを使用していると、「複数のフォームコントロール」がどのように配置されているのかを直感的に把握しにくいと思います。これは、HTMLに変換されたコードを見ると理解できます。HTMLコードを確認して、フォームの構造を把握してみてください。

<!-- エラーが出るコードの例 -->
<p>
    <label>Your Country<br>
        <span class="wpcf7-form-control-wrap" data-name="your-country">
            <span class="wpcf7-form-control wpcf7-checkbox">
                <span class="wpcf7-list-item first">
                    <label>
                        <input type="checkbox" name="your-country[]" value="China">
                        <span class="wpcf7-list-item-label">China</span>
                    </label>
                </span>
                <span class="wpcf7-list-item">
                    <label>
                        <input type="checkbox" name="your-country[]" value="India">
                        <span class="wpcf7-list-item-label">India</span>
                    </label>
                </span>
                <span class="wpcf7-list-item last">
                    <label>
                        <input type="checkbox" name="your-country[]" value="San Marino">
                        <span class="wpcf7-list-item-label">San Marino</span>
                    </label>
                </span>
            </span>
        </span>
    </label>
</p>

参考情報

もっと詳しく知りたい方は、以下の記事をご確認ください。

フォームに関する知識をより深めたい方は、MDNウェブ開発を学ぶウェブフォーム — ユーザーデータを扱うから始めみてはいかがでしょうか。

表形式のお問い合わせフォーム

実践編課題1のお問い合わせフォームを実際に作ってみましょう。参考サイトをそのまま再現するよりは、ユーザーの使い勝手のよさを考慮した方が良いと思うので、アレンジを加えて、いろいろ試してみました。

表の作成

ゼロからHTMLコードを書くのは手間がかかります。そこで、私の時短テクニックを紹介します。ぜひ、自分に合った効率的な方法を見つけてください。

  1. Wordで表を作成する
  2. WordPressの段落ブロックに表をコピペする
  3. 自動的にテーブルブロックに変換される
  4. テーブルブロックの[HTMLとして編集]をクリックする
  5. テーブルのHTMLコードをコピーする
  6. VS Codeなどでコードを整形する
  7. Contact Form 7のコンタクトフォームに貼り付ける

以下の表は、Wordで作成した表をコピーして段落ブロックに貼り付けたら、自動的にテーブルブロックに変換されたものです。

お名前 (必須)なまえ
メールアドレス (必須)メアド
ご希望のレッスンレッスン
ご希望の施設施設
第一希望日(必須)日付
第一希望時間(必須)時間
第二希望第二希望日(必須)
第二希望時間(必須)
インストラクターに聞きたいことメッセージ

以下のコードは、テーブルブロックのHTMLコードを整形したものです。

<table>
    <tbody>
        <tr>
            <td>お名前 (必須)</td>
            <td>なまえ</td>
        </tr>
        <tr>
            <td>メールアドレス (必須)</td>
            <td>メアド</td>
        </tr>
        <tr>
            <td>ご希望のレッスン</td>
            <td>レッスン</td>
        </tr>
        <tr>
            <td>ご希望の施設</td>
            <td>施設</td>
        </tr>
        <tr>
            <td>第一希望日(必須)</td>
            <td>日付</td>
        </tr>
        <tr>
            <td>第一希望時間(必須)</td>
            <td>時間</td>
        </tr>
        <tr>
            <td rowspan="2">第二希望</td>
            <td>第二希望日(必須)</td>
        </tr>
        <tr>
            <td>第二希望時間(必須)</td>
        </tr>
        <tr>
            <td>インストラクターに聞きたいこと</td>
            <td>メッセージ</td>
        </tr>
    </tbody>
</table>

コンタクトフォームの作成

テーブルのHTMLコードをコンタクトフォームに貼り付けて編集します。

  • label要素を追加する
  • フォームタグに置き換える
  • label要素とフォームタグを関連付ける
  • チェックボックスやラジオボタンはfieldset要素とlegend要素を使用する

完成したコンタクトフォーム

完成したコンタクトフォームはこちらです。次の点を確認してみてください。

  • ラベルをクリックまたはタップすると入力欄にフォーカスが移る
  • ラジオボタンやチェックボックスのラベルをクリックまたはタップすると選択される
  • 希望日時の入力は、第一希望と第二希望のどちらが使いやすいですか?
  • コンタクトフォームを表形式にするメリットは?
  • あなたはどのように作りますか?

    レッスン

    ご希望のレッスン

    施設

    ご希望の施設

    第二希望

    第二希望時間

    コードはこちらです。

    <table>
      <tbody>
        <tr>
          <td><label for="namefield">お名前</label></td>
          <td>[text* your-name id:namefield autocomplete:name]</td>
        </tr>
        <tr>
          <td><label for="emailfield">メールアドレス</label></td>
          <td>[email* your-email id:emailfield autocomplete:email]</td>
        </tr>
        <tr>
          <td>レッスン</td>
          <td>
            <fieldset>
              <legend>ご希望のレッスン</legend>
              [radio your-lesson use_label_element default:1 "初心者" "経験者"]
            </fieldset>
          </td>
        </tr>
        <tr>
          <td>施設</td>
          <td>
             <fieldset>
              <legend>ご希望の施設</legend>
              [radio your-location use_label_element default:1 "海老名" "湘南"]
            </fieldset>
          </td>
        </tr>
        <tr>
          <td><label for="datefield1">第一希望日</label></td>
          <td>[date* your-date-1 id:datefield1]</td>
        </tr>
        <tr>
          <td><label for="timefield1">第一希望時間</label></td>
          <td>[select* your-time-1 id:timefield1 "8時台" "9時台" "10時台" "11時台" "12時台" "13時台" "14時台" "15時台" "16時台" "17時台" "18時台" "19時台" "20時台"]</td>
        </tr>
        <tr>
          <td rowspan="2">第二希望</td>
          <td>
            <label>
              第二希望日
              [date* your-date-2 id:datefield2]
            </label>
          </td>
        </tr>
        <tr>
          <td>
            <fieldset>
              <legend>第二希望時間</legend>
              [checkbox* your-time-2 use_label_element exclusive "8時台" "9時台" "10時台" "11時台" "12時台" "13時台" "14時台" "15時台" "16時台" "17時台" "18時台" "19時台" "20時台"]
            </fieldset>
          </td>
        </tr>
        <tr>
          <td><label for="messagefield">メッセージ(任意)</label></td>
          <td>[textarea your-message id:messagefield placeholder "インストラクターに聞きたいことをご自由にお書きください"]</td>
        </tr>
      </tbody>
    </table>
    form table {
        overflow-x: auto;
    	width: 100%;
    }
    form table tr:nth-child(1) td:nth-child(1) {
    	width: 30%;
    }
    form td {
    	vertical-align: top;
    }

    まとめ

    この記事を読んで、さまざまなユーザーにとって分かりやすく使いやすいフォームを作成する知識とスキルを身につけていただけると嬉しいです。見た目を整えることはもちろん、アクセシビリティやユーザビリティを向上させることも重要です。ぜひ、このブログ記事を参考に、誰もが使いやすいフォームを作成してください。

    コメントする