リアルタイムで残りの必須項目数を表示するコンタクトフォーム

Posted on by

ウェブフォームは、ユーザーからの情報収集に不可欠なツールですが、
ユーザーが必須項目を見落としやすい場合があります。
この問題を解決するために、リアルタイムで残りの必須項目数を表示する方法を紹介します。
この方法は、ユーザーがフォームを完了するまでのガイドとして機能し、
ユーザーエクスペリエンスを向上させることができます。

ステップバイステップの実装方法

以下の手順に従って、HTMLとJavaScriptを使用して、
リアルタイムで残りの必須項目数を更新するコンタクトフォームを作成します。

HTMLフォームの準備

まず、基本的なHTMLフォームを作成します。この例では、3つの必須フィールド（名前、メールアドレス、メッセージ）を持つシンプルなコンタクトフォームを使用します。

<div class="container">
  <div class="form-container">
    <h2>コンタクトフォーム</h2>
    <form id="contactForm">
      <label for="name">名前:</label><br>
      <input type="text" id="name" name="name" oninput="updateRemainingCount()"><br>
      <label for="email">メールアドレス:</label><br>
      <input type="email" id="email" name="email" oninput="updateRemainingCount()"><br>
      <label for="message">メッセージ:</label><br>
      <textarea id="message" name="message" oninput="updateRemainingCount()"></textarea><br>
      <input type="submit" value="送信">
    </form>
  </div>
  <div class="info-container">
    <h2>残りの必須項目: <span id="remainingCount">3</span></h2>
  </div>
</div>

JavaScriptでリアルタイム更新機能の実装

次に、JavaScriptを使用して、ユーザーが
各フィールドに入力するたびに残りの必須項目数を更新する機能を実装します。

function updateRemainingCount() {
  const fields = ['name', 'email', 'message'];
  let remaining = fields.length;

  fields.forEach(field => {
    if (document.getElementById(field).value.trim() !== '') {
      remaining -= 1;
    }
  });

  document.getElementById('remainingCount').textContent = remaining;
}

document.addEventListener('DOMContentLoaded', updateRemainingCount);

このコードは、フォームの各入力フィールドが
変更されるたびにupdateRemainingCount関数を呼び出します。
この関数は、各フィールドが空かどうかをチェックし、未入力の必須フィールドの数をカウントして、
画面上の表示を更新します。

完成されたコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>コンタクトフォームの必須項目カウントダウン</title>
<style>
  .container {
    display: flex;
  }
  .form-container {
    flex: 1;
  }
  .info-container {
    flex: 1;
    padding-left: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="form-container">
    <h2>コンタクトフォーム</h2>
    <form id="contactForm">
      <label for="name">名前:</label><br>
      <input type="text" id="name" name="name" oninput="updateRemainingCount()"><br>
      <label for="email">メールアドレス:</label><br>
      <input type="email" id="email" name="email" oninput="updateRemainingCount()"><br>
      <label for="message">メッセージ:</label><br>
      <textarea id="message" name="message" oninput="updateRemainingCount()"></textarea><br>
      <input type="submit" value="送信">
    </form>
  </div>
  <div class="info-container">
    <h2>残りの必須項目: <span id="remainingCount">3</span></h2>
  </div>
</div>

<script>
function updateRemainingCount() {
  const fields = ['name', 'email', 'message'];
  let remaining = fields.length;

  fields.forEach(field => {
    if (document.getElementById(field).value.trim() !== '') {
      remaining -= 1;
    }
  });

  document.getElementById('remainingCount').textContent = remaining;
}

// ページ読み込み時にも一度実行しておく
document.addEventListener('DOMContentLoaded', updateRemainingCount);
</script>

</body>
</html>

まとめ

この実装を通じて、ユーザーがフォームを埋める過程でリアルタイムでフィードバックを得られるようになります。
これにより、ユーザーは必須項目を見落とすことなく、フォームをスムーズに完了させることができます。
さらに、このアプローチはユーザーエクスペリエンスを大幅に向上させるため、
ウェブサイトやアプリケーションにおいて有効な手法と言えるでしょう。

以上の方法で、ウェブフォームのユーザビリティを高め、
訪問者からの情報収集を効果的に行うことができます。