フォームの条件分岐は、アンケートや調査、申し込みフォームなど、ユーザーの入力内容に応じて次の質問や選択肢を動的に変えることができる非常に便利な機能です。
これにより、ユーザーに最適な質問を提示し、無駄のない効率的なフォーム作成が可能になります。
この記事では、条件分岐をコーディング・実装するための手順をわかりやすく解説し、初心者でもすぐに使えるコード例も紹介します。

フォームの条件分岐とは？

まず、フォームにおける「条件分岐」が何なのかを確認しましょう。
条件分岐とは、ユーザーの入力したデータや選択内容に応じて次の質問や表示内容を動的に変更する仕組みのことを指します。例えば、アンケートフォームで「車を持っていますか？」という質問に「はい」と答えた場合には、次に「車種を教えてください」という質問を表示し、「いいえ」と答えた場合にはその質問をスキップする、という具合です。

このように、条件分岐を使うことでユーザーの体験をシンプルかつ効率的にし、無駄な質問を減らすことができます。

フォームの条件分岐を使うメリット

条件分岐を使うことには多くのメリットがあります。特に次のようなポイントが挙げられます。

■ユーザーエクスペリエンスの向上
条件分岐を用いることで、ユーザーにとって不必要な質問や選択肢をスキップさせ、フォームをよりシンプルで使いやすくします。
これにより、ユーザーはストレスを感じずに必要な情報だけを入力でき、離脱率の低減に繋がります。

■より正確な情報収集
ユーザーが適切な質問にのみ回答できるようにすることで、より正確で関連性のあるデータを収集することができます。無関係な質問に対して無意味なデータが集まるリスクを減らします。

■フォームの簡略化
条件分岐を使用することで、フォーム全体がコンパクトにまとまり、ユーザーがすべての質問を一度に目にする必要がなくなります。これにより、フォーム自体がより魅力的で、使いやすくなります。

フォームの条件分岐の基本構造

条件分岐の基本構造は、プログラムにおける「if」文と似ています。ユーザーの入力に応じて、次の処理を分岐させることが基本的な流れです。
例えば、JavaScriptで条件分岐を実装する際の基本的なコード構造は次のようになります。

if (ユーザーの入力内容が特定の条件を満たす) {
    // 条件が満たされた場合の処理
} else {
    // 条件が満たされなかった場合の処理
}

フォームの条件分岐では、例えば「ある質問で特定の選択肢が選ばれた場合にのみ、次の質問を表示する」というパターンが一般的です。

HTMLとJavaScriptを使った基本的な条件分岐の実装

では、実際にHTMLとJavaScriptを使って簡単な条件分岐を実装してみましょう。
今回は、シンプルな「車の所有に関する質問」を例にとり、条件分岐を行います。

■HTMLのセットアップ
まずは基本的なHTMLを作成します。以下のコードでは、「車を所有していますか？」という質問を行い、回答によって次の質問を表示するかどうかを決定します。

<form id="carForm">
  <label>車を所有していますか？</label><br>
  <input type="radio" name="car" value="yes" id="hasCar"> はい<br>
  <input type="radio" name="car" value="no" id="noCar"> いいえ<br>
  
  <div id="carDetails" style="display:none;">
    <label>車種を教えてください</label><br>
    <input type="text" name="carModel" placeholder="車種を入力">
  </div>
</form>

ここでは、ユーザーが「はい」を選択した場合にのみ「車種を教えてください」というフィールドを表示させたいと考えています。初期状態ではこのフィールドは表示されていません（display:none; で非表示に設定しています）。

■JavaScriptの実装
次に、JavaScriptを使って条件分岐を実装します。ユーザーが「はい」を選択した場合には、車種入力欄を表示し、「いいえ」を選択した場合には非表示にします。

document.getElementById('hasCar').addEventListener('change', function() {
  document.getElementById('carDetails').style.display = 'block';
});

document.getElementById('noCar').addEventListener('change', function() {
  document.getElementById('carDetails').style.display = 'none';
});
CSSなどで見た目をきれいにすればこんな完成イメージに
CSSなどで見た目をきれいにすればこんな完成イメージに

このスクリプトでは、ラジオボタンの選択に応じて「車種」入力フィールドの表示/非表示を切り替えるようにしています。
「はい」が選ばれたときには carDetails の表示を「block」にし、「いいえ」のときには「none」にすることで、条件分岐を実現します。

実践例：問い合わせフォームでの条件分岐

次に、もう少し複雑な例として、問い合わせフォームでの条件分岐を考えてみましょう。
例えば、ユーザーが「サポートに関する質問」か「製品に関する質問」を選択した場合、それぞれに応じた質問内容を提示するフォームを作成することができます。

■HTML

<form id="inquiryForm">
  <label>お問い合わせの種類を選んでください</label><br>
  <select id="inquiryType">
    <option value="support">サポートに関する質問</option>
    <option value="product">製品に関する質問</option>
  </select>
  
  <div id="supportDetails" style="display:none;">
    <label>サポート内容を詳しく教えてください</label><br>
    <textarea name="supportDetail"></textarea>
  </div>
  
  <div id="productDetails" style="display:none;">
    <label>製品についての質問を入力してください</label><br>
    <textarea name="productDetail"></textarea>
  </div>
</form>

■JavaScript

document.getElementById('inquiryType').addEventListener('change', function() {
  var inquiryType = this.value;
  if (inquiryType === 'support') {
    document.getElementById('supportDetails').style.display = 'block';
    document.getElementById('productDetails').style.display = 'none';
  } else if (inquiryType === 'product') {
    document.getElementById('supportDetails').style.display = 'none';
    document.getElementById('productDetails').style.display = 'block';
  } else {
    document.getElementById('supportDetails').style.display = 'none';
    document.getElementById('productDetails').style.display = 'none';
  }
});
問い合わせフォームでの条件分岐
CSSなどで見た目をきれいにすればこんな完成イメージに

このコードでは、ユーザーが選択した問い合わせ内容に応じて、それぞれ適切な入力欄が表示されるようにしています。

フォーム作成ツールで複雑な条件分岐を楽に実現する

HTMLとJavaScriptでユーザーの選択した回答に合わせて、表示する質問を変えることができますが、多くの質問を条件分岐しようとするとコードも複雑になっていきます。
また、フォームの質問を修正する場合も手間がかかります。

フォーム作成ツール「フォームメーラー」を利用すれば、ノーコードで複雑な条件分岐にも対応したフォームを作成できます。
無料から利用でき、リアルタイムバリデーションや離脱防止機能、自動返信メールなどを搭載した高機能なフォームを簡単に作成できます。
コーディングでの複雑な条件分岐は面倒くさく、途中の仕様変更や修正の対応は時間がかかります。
フォームをこれから作成しようとするなら、まずは「フォームメーラー」で試しにフォームを作成してみてください。

フォームメーラー

▼フォームメーラー
https://www.form-mailer.jp/

まとめ

フォームの条件分岐を実装することで、ユーザーにとって使いやすく、かつ効率的なインターフェースを提供することができます。
JavaScriptを用いた基本的な条件分岐は、簡単に実装でき、応用範囲も広いです。この記事では、シンプルなフォーム条件分岐の実装方法を解説しました。このような条件分岐を活用して、より良いフォームを作成してみてください。

▼カスタムチェックボックスを作ろう！CSSでのスタイリング方法完全ガイド
https://blog.form-mailer.jp/useful/custom_checkbox/

フォームメーラー