【保存版】HTMLフォームで作る！Googleフォームと連携したお問い合わせフォームの作り方

<form id="contact-form"
  action="https://docs.google.com/forms/d/e/【あなたのフォームID】/formResponse"
  method="POST" target="hidden_iframe">
  
  <label>名前<input type="text" name="entry.1111111111" required></label>

  <fieldset>
    <legend>性別</legend>
    <label><input type="radio" name="entry.2222222222" value="男性" required> 男性</label>
    <label><input type="radio" name="entry.2222222222" value="女性"> 女性</label>
  </fieldset>

  <fieldset>
    <legend>生年月日</legend>
    <select id="birth-year" name="entry.3333333333_year" required></select>
    <select id="birth-month" name="entry.3333333333_month" required></select>
    <select id="birth-day" name="entry.3333333333_day" required></select>
  </fieldset>

  <label>郵便番号<input type="text" name="entry.4444444444" required></label>
  <label>住所<input type="text" name="entry.5555555555" required></label>
  <label>メール<input type="email" name="entry.6666666666" required></label>

  <label>電話番号
    <input type="tel" name="entry.7777777777" placeholder="000" required>
    <input type="tel" name="entry.8888888888" placeholder="0000" required>
    <input type="tel" name="entry.9999999999" placeholder="0000" required>
  </label>

  <fieldset id="shipping-type">
    <legend>発送日</legend>
    <label><input type="radio" name="entry.1010101010" value="即日発送" required> 即日発送</label>
    <label><input type="radio" name="entry.1010101010" value="希望日指定"> 希望日指定</label>
  </fieldset>

  <fieldset id="shipping-date">
    <legend>発送希望日</legend>
    <select id="shipping-year" name="entry.1111111112_year"></select>
    <select id="shipping-month" name="entry.1111111112_month"></select>
    <select id="shipping-day" name="entry.1111111112_day"></select>
  </fieldset>

  <label>
    <input type="checkbox" name="entry.1212121212" value="同意する" required> 利用規約に同意します
  </label>

  <button type="button" id="btn-confirm">確認</button>
</form>

<div id="confirm-area" style="display:none;">
  <h2>入力内容の確認</h2>
  <div id="confirm-list"></div>
  <button type="button" id="btn-send">送信する</button>
  <button type="button" id="btn-back">戻る</button>
</div>

<iframe name="hidden_iframe" style="display:none;"></iframe>

<script>
// 年月日 select を自動生成
(function(){
  const nowYear = new Date().getFullYear();
  const addYearOptions = (id, start, end) => {
    const sel = document.getElementById(id);
    sel.innerHTML = '<option value="">年</option>';
    for(let y = end; y >= start; y--){
      sel.innerHTML += `<option value="${y}">${y}年</option>`;
    }
  };
  const addMonthOptions = id => {
    const sel = document.getElementById(id);
    sel.innerHTML = '<option value="">月</option>';
    for(let m = 1; m <= 12; m++){
      sel.innerHTML += `<option value="${m}">${m}月</option>`;
    }
  };
  const updateDays = (yearId, monthId, dayId) => {
    const y = parseInt(document.getElementById(yearId).value);
    const m = parseInt(document.getElementById(monthId).value);
    const sel = document.getElementById(dayId);
    sel.innerHTML = '<option value="">日</option>';
    if(!y || !m) return;
    const dmax = new Date(y, m, 0).getDate();
    for(let d = 1; d <= dmax; d++){
      sel.innerHTML += `<option value="${d}">${d}日</option>`;
    }
  };
  addYearOptions('birth-year', nowYear - 100, nowYear);
  addYearOptions('shipping-year', nowYear, nowYear + 1);
  addMonthOptions('birth-month');
  addMonthOptions('shipping-month');

  document.getElementById('birth-year').addEventListener('change',()=>updateDays('birth-year','birth-month','birth-day'));
  document.getElementById('birth-month').addEventListener('change',()=>updateDays('birth-year','birth-month','birth-day'));
  document.getElementById('shipping-year').addEventListener('change',()=>updateDays('shipping-year','shipping-month','shipping-day'));
  document.getElementById('shipping-month').addEventListener('change',()=>updateDays('shipping-year','shipping-month','shipping-day'));
})();

// 発送希望日の制御
document.addEventListener('DOMContentLoaded', () => {
  const radios = document.querySelectorAll('input[name="entry.1010101010"]');
  const selects = document.querySelectorAll('#shipping-date select');
  const toggleShippingDate = () => {
    const selected = document.querySelector('input[name="entry.1010101010"]:checked');
    const enable = selected?.value === '希望日指定';
    selects.forEach(sel => {
      sel.disabled = !enable;
      if(enable){
        sel.setAttribute('required','');
      } else {
        sel.removeAttribute('required');
        sel.value = '';
      }
    });
  };
  radios.forEach(r => r.addEventListener('change', toggleShippingDate));
  toggleShippingDate();
});

// 確認画面の実装
document.getElementById('btn-confirm').addEventListener('click', () => {
  const form = document.getElementById('contact-form');
  const list = document.getElementById('confirm-list');
  const confirm = document.getElementById('confirm-area');
  const data = new FormData(form);
  list.innerHTML = '';
  for (let [name, value] of data.entries()) {
    list.innerHTML += `<p><strong>${name}</strong>: ${value}</p>`;
  }
  form.style.display = 'none';
  confirm.style.display = 'block';
});

document.getElementById('btn-back').addEventListener('click', () => {
  document.getElementById('confirm-area').style.display = 'none';
  document.getElementById('contact-form').style.display = 'block';
});

document.getElementById('btn-send').addEventListener('click', () => {
  document.getElementById('contact-form').submit();
  alert("送信が完了しました。ありがとうございました！");
});
</script>