婚禮邀請 - 賓客回覆表單

by j91157j91157

HTML

<link rel="stylesheet" href="style.css" />

<!-- 背景裝飾 -->
<div class="background-overlay"></div>

<!-- 主要容器 -->
<div class="container">
  <!-- 標題區 -->
  <header class="header">
    <h1 class="couple-names">志明 ❤️ 春嬌</h1>
    <p class="wedding-date">2026年10月10日 星期六</p>
    <div class="divider"></div>
  </header>

  <!-- 婚禮資訊區 -->
  <section class="wedding-info">
    <h2>婚宴資訊</h2>
    <div class="info-card">
      <p><strong>📅 日期:</strong> 2026年10月10日(星期六)</p>
      <p><strong>🕐 時間:</strong> 晚上 6:00 入場 | 6:30 開席</p>
      <p><strong>📍 地點:</strong> 台北君悅大飯店 3樓 君悅廳</p>
      <p><strong>🏠 地址:</strong> 台北市信義區松壽路2號</p>
    </div>
  </section>

  <!-- 表單區 -->
  <section class="form-section">
    <h2>賓客回覆表單</h2>
    <p class="form-description">請於 2026年9月10日前填寫完成,謝謝您!</p>

    <form id="rsvpForm" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScQoZZJV7sKij0_tEOktuIP0hIzCSgkyAn2cJ5hdcAgl3DhJA/formResponse" method="POST">
      <!-- 賓客姓名 -->
      <div class="form-group">
        <label for="guestName">賓客姓名 <span class="required">*</span></label>
        <input
          type="text"
          id="guestName"
          name="entry.999981552"
          required
          placeholder="請輸入您的姓名"
        />
      </div>

      <!-- 與新人關係 -->
      <div class="form-group">
        <label>與新人關係 <span class="required">*</span></label>
        <div class="radio-group">
          <label class="radio-label">
            <input
              type="radio"
              name="entry.1608027585"
              value="新郎方"
              required
            />
            <span>新郎方親友</span>
          </label>
          <label class="radio-label">
            <input
              type="radio"
              name="entry.1608027585"
              value="新娘方"
              required
            />
            <span>新娘方親友</span>
          </label>
        </div>
      </div>

      <!-- 出席意願 -->
      <div class="form-group">
  ...

CSS

/* 全域設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  min-height: 100vh;
  padding: 20px;
  position: relative;
}

/* 背景裝飾 */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 182, 193, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 218, 185, 0.3) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* 主容器 */
.container {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 標題區 */
.header {
  text-align: center;
  margin-bottom: 30px;
}

.couple-names {
  font-size: 2.5em;
  color: #d4526e;
  margin-bottom: 10px;
  font-weight: 600;
}

.wedding-date {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 20px;
}

.divider {
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, transparent, #d4526e, transparent);
  margin: 0 auto;
}

/* 婚禮資訊區 */
.wedding-info {
  margin-bottom: 40px;
}

.wedding-info h2 {
  color: #d4526e;
  font-size: 1.8em;
  margin-bottom: 20px;
  text-align: center;
}

.info-card {
  background: #fff9f5;
  border-left: 4px solid #d4526e;
  padding: 20px;
  border-radius: 10px;
  line-height: 1.8;
}

.info-card p {
  margin-bottom: 10px;
  color: #555;
}

.info-card strong {
  color: #d4526e;
}

/* 表單區 */
.form-section h2 {
  color: #d4526e;
...

JavaScript

// 等待DOM載入完成
document.addEventListener('DOMContentLoaded', function () {
  // 取得表單元素
  const form = document.getElementById('rsvpForm');
  const attendYes = document.getElementById('attendYes');
  const attendNo = document.getElementById('attendNo');
  const attendanceOptions = document.getElementById('attendanceOptions');
  const submitBtn = document.getElementById('submitBtn');
  const modal = document.getElementById('successModal');

  // 監聽出席意願變化
  attendYes.addEventListener('change', function () {
    if (this.checked) {
      attendanceOptions.style.display = 'block';
      // 設定必填
      document.getElementById('guestCount').required = true;
      document
        .querySelectorAll('input[name="entry.1632404182"]')
        .forEach((input) => {
          input.required = true;
        });
    }
  });

  attendNo.addEventListener('change', function () {
    if (this.checked) {
      attendanceOptions.style.display = 'none';
      // 取消必填
      document.getElementById('guestCount').required = false;
      document
        .querySelectorAll('input[name="entry.1632404182"]')
        .forEach((input) => {
          input.required = false;
        });
    }
  });

  // 表單提交處理
  form.addEventListener('submit', function (e) {
    e.preventDefault();

    // 驗證表單
    if (!validateForm()) {
      return;
    }

    // 顯示載入狀態
    submitBtn.disabled = true;
    document.querySelector('.btn-text').style.display = 'none';
    document.querySelector('.btn-loading').style.display = 'inline';

    // 準備表單資料
    const formData = new FormData(form);

    // 發送到Google表單
    fetch(form.action, {
      method: 'POST',
      body: formData,
      mode: 'no-cors',
    })
      .then(() => {
        // 顯示成功訊息
        showSuccessModal();
        // 重置表單
        form.reset();
        attendanceOptions.style.display = 'none';
      })
      .catch((error) => {
        console.error('錯誤:', error);
       ...