73f8442796
- Added ContactFormSubmission model to store contact form submissions. - Created ContactForm for handling form submissions. - Implemented admin interface for managing contact form submissions. - Developed views and JavaScript for handling contact form submission via AJAX. - Added SMTP settings model for email configuration. - Created notification email templates for contact form submissions. - Updated frontend to include contact form modal and associated styles. - Added tests for contact form submission and validation.
53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
<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>
|