JavaScriptで作る！選択によって表示内容が変わる条件分岐フォームの実装方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
フォームの使いやすさは、ユーザー体験を大きく左右するポイントのひとつですよね。

特に「選択肢によって次に表示される入力欄が変わる」ような“条件分岐フォーム”は、アンケートや問い合わせフォーム、見積もりフォームなどでよく見かけます。

例えば、「お問い合わせの種類」で「資料請求」を選んだときだけ、住所入力欄が出てくるような、そんな仕組みです。

今回はこれをJavaScriptでサクッと作れる方法を、実用的なコードとともにご紹介していきます！

まずは基本構造を知ろう

条件分岐フォームを作るには、大きく以下の3つの要素が必要です。

実際のフォーム構造はこのようになります。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

JavaScriptで切り替え処理を実装しよう

次に、ユーザーが選択を変更したときに、該当のブロックだけ表示させる処理を書きます。

  const inquiryType = document.getElementById("inquiry-type");
  const generalForm = document.getElementById("general-form");
  const requestForm = document.getElementById("request-form");
  inquiryType.addEventListener("change", function () {
    const value = this.value;
    if (value === "request") {
      generalForm.style.display = "none";
      requestForm.style.display = "block";
    } else {
      generalForm.style.display = "block";
      requestForm.style.display = "none";
    }
  });

このコードでは、セレクトボックスの値を監視し、それに応じて該当フォームブロックを表示・非表示にしています。

ラジオボタンにも応用できる？

もちろん、ラジオボタンやチェックボックスでも同様に使えます。
ラジオボタンの例も簡単に紹介します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

CSSも活用して滑らかに切り替える

表示・非表示の切り替えはdisplayだけでなく、CSSアニメーションを絡めることでUXが一段階アップします。

.form-block {
    transition: opacity 0.3s ease;
  }
  .hidden {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }

あとはJavaScript側で.hiddenクラスを付け外しすれば、スムーズにフェードイン・アウトさせることができます。

実務での使い所と注意点

この「条件分岐フォーム」は以下のようなシーンでよく使われます!

注意点として、非表示項目は送信されないため、必須項目の管理やバリデーションもJavaScript側で調整しましょう。

まとめ

JavaScriptを使った条件分岐フォームは、ユーザーにとって「自分に必要な項目だけが表示される」快適な体験を実現できます。
今回ご紹介したようなセレクトボックスやラジオボタンによる切り替えは、実装もシンプルで実務にすぐ使える内容です。

小さな改善ですが、こうした仕組みがユーザー満足度を大きく左右することもあります。
ぜひ、ご自身のサイトや案件に取り入れてみてくださいね。

satokotadesignキャンペーン実施中！