feat: upload file in contact form

templates/pages/contact.html

@@ -26,7 +26,7 @@
 
       <div class="contact-form-wrap glass-card fade-in">
         <h2 class="contact-form-title" id="contact-form-heading">Send a Message</h2>
-        <form id="contactForm" novalidate action="{% url 'pages:contact' %}" method="post">
+        <form id="contactForm" novalidate action="{% url 'pages:contact' %}" method="post" enctype="multipart/form-data">
           {% csrf_token %}
 
           <div class="form-group">
@@ -53,6 +53,16 @@
             <span class="form-field-error" data-field="email"></span>
           </div>
 
+          <div class="form-group">
+            <label for="id_attachments">Attachments <span class="optional-label">(optional)</span></label>
+            <input type="file" name="attachments" id="id_attachments" multiple
+                   accept=".png,.jpg,.jpeg,.gif,.webp,.bmp,.zip,.log,.txt"
+                   class="file-input" />
+            <p class="form-hint">Images, ZIP, or log/text files — up to 3 files, 10 MB each.</p>
+            <p class="form-file-list" id="attachmentFileList" aria-live="polite"></p>
+            <span class="form-field-error" data-field="attachments"></span>
+          </div>
+
           <div class="form-group form-group--captcha">
             <label for="id_captcha">
               Verification: what is <strong id="captchaQuestion">{{ captcha_question }}</strong>?
@@ -178,6 +188,8 @@
   if (!form) return;
 
   const emailField = form.querySelector('#id_email');
+  const fileInput = form.querySelector('#id_attachments');
+  const fileList = form.querySelector('#attachmentFileList');
   const submitBtn = form.querySelector('#submitBtn');
   const btnLabel = submitBtn.querySelector('.btn-label');
   const btnSpinner = submitBtn.querySelector('.btn-spinner');
@@ -226,6 +238,7 @@
       const data = await res.json();
       if (data.success) {
         form.reset();
+        if (fileList) fileList.textContent = '';
         showModal('successModal');
       } else {
         if (data.errors) showErrors(data.errors);
@@ -248,6 +261,12 @@
     }
   }
 
+  fileInput?.addEventListener('change', () => {
+    if (!fileList) return;
+    const names = [...fileInput.files].map(file => file.name);
+    fileList.textContent = names.length ? names.join(', ') : '';
+  });
+
   form.addEventListener('submit', e => {
     e.preventDefault();
     if (!emailField.value.trim()) {