<div class="contact-form-modal" data-contact-form hidden>
  <div class="contact-form-modal__backdrop" data-contact-close></div>
  <div class="contact-form-modal__dialog" role="dialog" aria-modal="true" aria-label="聯絡表單">
    <button class="contact-form-modal__close" type="button" aria-label="關閉" data-contact-close>×</button>

    <h2 class="contact-form-modal__title">聯絡我們</h2>
    <p class="contact-form-modal__subtitle">有任何問題或想要與我們交流的地方，都歡迎留言聯絡</p>

    <form class="contact-form" method="post" action="{% url 'contact_form_submit' %}" data-contact-form-body>
      {% csrf_token %}
      <input type="hidden" name="source_page" value="{{ request.get_full_path|default:'/' }}" />

      <div class="contact-form__row">
        <div class="contact-form__field">
          <label for="contact-form-name">該如何稱呼您</label>
          <input id="contact-form-name" type="text" name="name" required placeholder="請留下您的姓名" />
        </div>
        <div class="contact-form__field">
          <label for="contact-form-contact">聯絡方式</label>
          <input id="contact-form-contact" type="text" name="contact" required placeholder="+886..." />
        </div>
      </div>

      <div class="contact-form__field">
        <label for="contact-form-email">Email</label>
        <input id="contact-form-email" type="email" name="email" placeholder="name@example.com" />
      </div>

      <div class="contact-form__field">
        <label for="contact-form-category">問題類別</label>
        <select id="contact-form-category" name="category" required>
          <option value="" selected disabled>請選擇問題類別</option>
          <option value="collaboration">合作邀約</option>
          <option value="website_issue">網站問題回報</option>
          <option value="career">求職專區</option>
          <option value="other">其他</option>
        </select>
      </div>

      <div class="contact-form__field">
        <label for="contact-form-message">留言內容</label>
        <textarea id="contact-form-message" name="message" required></textarea>
      </div>

      <div class="contact-form__actions">
        <button type="submit">送出</button>
      </div>

      <p class="contact-form__result" data-contact-result aria-live="polite"></p>
    </form>
  </div>
</div>
