上毛印刷株式会社

【JavaScript】チェックをつけた項目によってお問い合わせフォームを切り替える

子ブログ

タグ

年別

【JavaScript】チェックをつけた項目によってお問い合わせフォームを切り替える

2025年09月29日
WEBサイト制作
  • #HTML
  • #css
  • #JavaScript
  • #tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

結構要望の多い、チェックした項目によってお問い合わせフォームの内容を切り替えるtipsを紹介します！

実装例

お問い合わせ内容を入力してください。

食べたことある？

任意

感想

任意
グループ・ソロ

必須

お名前

必須
チーム名

必須
あだ名

必須
メールアドレス

必須
電話番号

任意
メールアドレス

必須
半券番号

任意

No

任意
お問い合わせ種別

必須

お問い合わせ内容

必須
最寄り駅

必須

HTML例

<div class="p-thanksBlock">
  <form class="" action="/inquiry/confirm.php" method="post">
    <input type="hidden" name="_token" value="f1yr0xnatbtxx83b6qgh8ihbzz4eozn8l4c9bhzrytkctgxh">
    <p>
      お問い合わせ内容を入力してください。
    </p>
    <div class="p-thanksBlock__content">
      <dl>
        <dt>食べたことある？<div class="p-thanksBlock__icon p-thanksBlock__icon--any">任意</div></dt>
        <dd class="p-thanksMember" style="flex-wrap: wrap;">
          <div class="u-flex">
            <label class="p-thanksBlock__label">ある<input type="radio" name="is_member" value="" class="js-check"><span></span></label>
            <label class="p-thanksBlock__label">ない<input type="radio" name="is_member" value="" class="js-check-no"><span></span></label>
          </div>
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-nickname">
        <dt>感想<div class="p-thanksBlock__icon p-thanksBlock__icon--any">任意</div></dt>
        <dd>
          <input type="text" name="id" value="" placeholder="">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj">
        <dt>グループ・ソロ<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd class="p-thanksMember">
          <div class="u-flex">
            <label class="p-thanksBlock__label">グループ<input type="radio" name="is_yakumi" value="" class="js-check-group"><span></span></label>
            <label class="p-thanksBlock__label">ソロ<input type="radio" name="is_yakumi" value="" class="js-check-individual"><span></span></label>
          </div>
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-group">
        <dt>お名前<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="name" value="">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-group">
        <dt>チーム名<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="group_name" value="">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-group">
        <dt>あだ名<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="section" value="" placeholder="無い場合は「なし」と入力してください。">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-group">
        <dt>メールアドレス<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="group_email" value="" placeholder="example@example.com">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-group">
        <dt>電話番号<div class="p-thanksBlock__icon p-thanksBlock__icon--any">任意</div></dt>
        <dd>
          <input type="tel" name="tel" value="">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-individual is-individual">
        <dt>メールアドレス<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="individual_email" value="" placeholder="example@example.com">
        </dd>
      </dl>
      <dl>
        <dt>半券番号<div class="p-thanksBlock__icon p-thanksBlock__icon--any">任意</div></dt>
        <dd class="p-thanksMember">
          <div class="u-flex">
            <label class="p-thanksBlock__label">有<input type="radio" name="has_inquiry_number" value="1" class="js-check-num"><span></span></label>
            <label class="p-thanksBlock__label">無<input type="radio" name="has_inquiry_number" value="2" class="js-check-no-num"><span></span></label>
          </div>
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-num">
        <dt>No<div class="p-thanksBlock__icon p-thanksBlock__icon--any">任意</div></dt>
        <dd>
            <input type="text" name="inquiry_number" value="" placeholder="000-000-000">
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj">
        <dt>お問い合わせ種別<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd class="p-thanksMember">
          <div class="u-flex">
            <label class="p-thanksBlock__label">予約<input type="radio" name="inquiry_type" value="1" class="js-check-question"><span></span></label>
            <label class="p-thanksBlock__label">立地<input type="radio" name="inquiry_type" value="2" class="js-check-defect"><span></span></label>
          </div>
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-question">
        <dt>お問い合わせ内容<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <textarea name="inquiry" placeholder="" id=""></textarea>
        </dd>
      </dl>
      <dl class="p-thanksBlock__adj js-defect">
        <dt>最寄り駅<div class="p-thanksBlock__icon p-thanksBlock__icon--mandatory">必須</div></dt>
        <dd>
          <input type="text" name="defect_service" value="" placeholder="池袋">
        </dd>
      </dl>
    </div>
  </form>
</div>

CSS例

.p-thanksBlock {
  width: 100%;
  max-width: 800px;
  margin: auto;
  color: #707070;
  border-radius: 10px;
  padding: 55px 0px 60px;
  background-color: #fff;
}
.p-thanksBlock p {
  line-height: 1.8;
}
.p-thanksBlock p span {
  color: #f05300;
}
.p-thanksBlock .c-basicButton {
  width: 370px;
  margin: 0 auto;
}
.p-thanksBlock__content {
  margin: 17px 0 0;
}
.p-thanksBlock__content dl {
  display: flex;
  align-items: center;
  padding: 20px 0 20px;
  border-top: 1px solid #ddd;
}
.p-thanksBlock__content dl.js-nickname,
.p-thanksBlock__content dl.js-group,
.p-thanksBlock__content dl.js-individual,
.p-thanksBlock__content dl.js-num,
.p-thanksBlock__content dl.js-question,
.p-thanksBlock__content dl.js-defect {
  display: none;
}
.p-thanksBlock__content dl.is-nickname,
.p-thanksBlock__content dl.is-group,
.p-thanksBlock__content dl.is-individual,
.p-thanksBlock__content dl.is-num,
.p-thanksBlock__content dl.is-question,
.p-thanksBlock__content dl.is-defect  {
  display: flex;
}
.p-thanksBlock__content dl.p-thanksBlock__adj {
  align-items: flex-start;
}
.p-thanksBlock__content dl.p-thanksBlock__adj dt {
  position: relative;
  top: 5px;
}
.p-thanksBlock__content dt {
  font-weight: bold;
  width: 210px;
  min-width: 210px;
  font-size: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.p-thanksBlock__content dd {
  line-height: 1.7;
  width: 100%;
}
.p-thanksBlock__content dd p {
  font-size: 14px;
  color: #F05300;
}
.p-thanksBlock__content dd p:last-of-type {
  margin: 0 0 10px;
}
.p-thanksBlock__content input[type="text"],
.p-thanksBlock__content input[type="radio"],
.p-thanksBlock__content input[type="email"],
.p-thanksBlock__content input[type="tel"] {
  font-size: 18px;
  background-color: #f5f5f5;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  width: 100%;
  height: 52px;
  padding: 0 0 0 18px;
}
.p-thanksBlock__content input[type="text"]::placeholder,
.p-thanksBlock__content input[type="radio"]::placeholder,
.p-thanksBlock__content input[type="email"]::placeholder,
.p-thanksBlock__content input[type="tel"]::placeholder {
  color: #aaa;
}
.p-thanksBlock__content input[type="checkbox"],
.p-thanksBlock__content input[type="radio"] {
  width: 30px;
  height: 30px;
  opacity: 0;
  margin: 0 0 0 5px;
}
.p-thanksBlock__content textarea {
  background-color: #f5f5f5;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  width: 100%;
  min-height: 160px;
}
.p-thanksBlock__content textarea::placeholder {
  color: #aaa;
}
.p-thanksBlock__icon {
  margin: 0 20px 0 0;
  width: 32px;
  min-width: 32px;
  padding: 1px 2px 1px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
}
.p-thanksBlock__icon--mandatory {
  background-color: #c30000;
}
.p-thanksBlock__icon--any {
  background-color: #787878;
}
.p-thanksBlock__btn {
  width: 560px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.p-thanksBlock__btn .c-basicButton {
  width: 350px;
  cursor: pointer;
}
.p-thanksBlock__btn .c-basicButton:nth-of-type(1) {
  margin: 0 40px 0 0;
  background-color: #fff;
  border: 2px solid #50c300;
  color: #50c300;
}
.p-thanksBlock__btn .c-basicButton:nth-of-type(1):hover {
  background-color: #50c300;
  color: #fff;
}
.p-thanksBlock__Done {
  margin: 0 0 36px;
  padding: 40px 0 18px;
  border-top: 1px solid #ddd;
}
.p-thanksBlock__Done a {
  border-bottom: 1px solid #c0c0c0;
  transition: 0.4s ease;
}
.p-thanksBlock__Done a:hover {
  opacity: 0.7;
  border-bottom: 1px solid transparent;
}
.p-thanksBlock__privacy p {
  text-align: center;
}
.p-thanksBlock__title {
  margin: 0 0 25px;
  padding: 0 0 14px;
  border-bottom: 1px solid #dddddd;
}
.p-thanksBlock__title h2 {
  font-size: 24px;
  text-align: center;
}
.p-thanksBlock__label {
  position: relative;
  display: flex;
  align-items: center;
  word-break: break-all;
}
.p-thanksBlock__label input[type="checkbox"] + span,
.p-thanksBlock__label input[type="radio"] + span {
  margin: 0 0 0 43px;
}
.p-thanksBlock__label input[type="checkbox"] + span::before,
.p-thanksBlock__label input[type="radio"] + span::before {
  z-index: 0;
  background-color: transparent;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0px 1px 2px 1px #c4c4c4;
  border: 1px #b8b8ba solid;
  background: #f5f5f5;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: 45px;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}
.p-thanksBlock__label input[type="checkbox"]:checked + span::after,
.p-thanksBlock__label input[type="radio"]:checked + span::after {
  z-index: 1;
  margin: 2px 5px;
  width: 12px;
  height: 11px;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  left: -1px;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}
.p-thanksBlock__label input[type="checkbox"] + span,
.p-thanksBlock__label input[type="radio"] + span {
  font-size: 18px;
  color: #49525b;
}
.p-thanksBlock__label input[type="checkbox"] + span::before,
.p-thanksBlock__label input[type="radio"] + span::before {
  width: 30px;
  height: 30px;
  border: 1px solid #c8c8c8;
  background: #f5f5f5;
  box-shadow: none;
}
.u-flex{
  display: flex;
}
.p-thanksBlock__label input[type="checkbox"]:checked + span::after,
.p-thanksBlock__label input[type="radio"]:checked + span::after {
  top: 8px;
  left: auto;
  right: 46px;
  width: 18px;
  height: 12px;
  border-left: 5px solid #c30000;
  border-bottom: 5px solid #c30000;
  transform: rotate(-45deg);
  background: none;
}

JavaScript例

document.addEventListener("DOMContentLoaded", () => {
  const onChange = (selector, fn) => {
    document.querySelectorAll(selector).forEach(el =>
      el.addEventListener("change", fn)
    );
  };
  const toggle = (target, cls) =>
    document.querySelectorAll(target).forEach(el => el.classList.toggle(cls));
  const remove = (target, cls) =>
    document.querySelectorAll(target).forEach(el => el.classList.remove(cls));
  onChange(".js-check", () => toggle(".js-nickname", "is-nickname"));
  onChange(".js-check-no", () => remove(".js-nickname", "is-nickname"));
  onChange(".js-check-group", () => {
    toggle(".js-group", "is-group");
    remove(".js-individual", "is-individual");
  });
  onChange(".js-check-individual", () => {
    toggle(".js-individual", "is-individual");
    remove(".js-group", "is-group");
  });
  onChange(".js-check-num", () => toggle(".js-num", "is-num"));
  onChange(".js-check-no-num", () => remove(".js-num", "is-num"));
  onChange(".js-check-question", () => {
    toggle(".js-question", "is-question");
    remove(".js-defect", "is-defect");
  });
  onChange(".js-check-defect", () => {
    toggle(".js-defect", "is-defect");
    remove(".js-question", "is-question");
  });
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！

WEB制作担当ソーヤ

ソーヤ

上毛印刷WEB制作担当
東証プライム企業の本社WEB受託チームにてフロントエンドエンジニアの経験あり。


この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。

    お名前必須
    メールアドレス必須
    お問い合わせ内容必須

    関連記事

    ブログ一覧へ
    Copyright © Jomo Printing Co.,Ltd.All rights reserved.
    PAGE TOP