add contact form with human verification and styling enhancements

Author: devshafi

index.html

@@ -286,6 +286,44 @@ <h2>Achievements & Activities</h2>
     <section id="contact" class="section card reveal">
       <h2>Contact</h2>
       <p>Open to collaborations in AI research, LLM applications, and software engineering opportunities.</p>
+      <p class="privacy-note">Privacy-first form with lightweight bot protection. No analytics or ad trackers are loaded.</p>
+
+      <form id="contact-form" class="contact-form" novalidate>
+        <div class="form-grid">
+          <label>
+            Name
+            <input type="text" name="name" autocomplete="name" required>
+          </label>
+          <label>
+            Email
+            <input type="email" name="email" autocomplete="email" required>
+          </label>
+        </div>
+
+        <label>
+          Subject
+          <input type="text" name="subject" required>
+        </label>
+
+        <label>
+          Message
+          <textarea name="message" rows="6" required></textarea>
+        </label>
+
+        <label id="human-check-label" data-answer="">
+          <span id="human-check-question">Human check</span>
+          <input type="number" id="human-check-input" inputmode="numeric" required>
+        </label>
+
+        <input type="text" name="_honey" class="hp-field" tabindex="-1" autocomplete="off" aria-hidden="true">
+        <input type="hidden" name="_subject" value="Portfolio Contact Form Submission">
+        <input type="hidden" name="_captcha" value="false">
+        <input type="hidden" id="form-started-at" value="">
+
+        <button class="btn btn-primary" type="submit">Send Message</button>
+        <p id="form-status" class="form-status" role="status" aria-live="polite"></p>
+      </form>
+
       <div class="contact-grid">
         <a href="mailto:f.shafi@queensu.ca">f.shafi@queensu.ca</a>
         <a href="tel:+16135616661">+1 613 561 6661</a>

script.js

@@ -35,3 +35,68 @@ window.addEventListener('scroll', activateNav);
 window.addEventListener('load', activateNav);
 
 document.getElementById('year').textContent = new Date().getFullYear();
+
+const contactForm = document.getElementById('contact-form');
+const formStatus = document.getElementById('form-status');
+const humanCheckLabel = document.getElementById('human-check-label');
+const humanCheckQuestion = document.getElementById('human-check-question');
+const humanCheckInput = document.getElementById('human-check-input');
+const formStartedAt = document.getElementById('form-started-at');
+
+const createHumanCheck = () => {
+  const a = Math.floor(Math.random() * 8) + 1;
+  const b = Math.floor(Math.random() * 8) + 1;
+  humanCheckQuestion.textContent = `Human check: What is ${a} + ${b}?`;
+  humanCheckLabel.dataset.answer = String(a + b);
+};
+
+if (contactForm && formStatus && humanCheckLabel && humanCheckQuestion && humanCheckInput && formStartedAt) {
+  formStartedAt.value = String(Date.now());
+  createHumanCheck();
+
+  contactForm.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    formStatus.textContent = '';
+
+    if (!contactForm.checkValidity()) {
+      formStatus.textContent = 'Please complete all required fields.';
+      contactForm.reportValidity();
+      return;
+    }
+
+    const elapsed = Date.now() - Number(formStartedAt.value);
+    if (elapsed < 4000) {
+      formStatus.textContent = 'Please wait a few seconds and try again.';
+      return;
+    }
+
+    if (humanCheckInput.value.trim() !== humanCheckLabel.dataset.answer) {
+      formStatus.textContent = 'Human check answer is incorrect.';
+      createHumanCheck();
+      humanCheckInput.value = '';
+      return;
+    }
+
+    const formData = new FormData(contactForm);
+    const endpoint = 'https://formsubmit.co/ajax/f.shafi@queensu.ca';
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { Accept: 'application/json' },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error('Request failed');
+      }
+
+      formStatus.textContent = 'Thanks! Your message has been sent.';
+      contactForm.reset();
+      createHumanCheck();
+      formStartedAt.value = String(Date.now());
+    } catch {
+      formStatus.textContent = 'Could not send right now. Please email me directly at f.shafi@queensu.ca.';
+    }
+  });
+}

styles.css

@@ -315,6 +315,7 @@ article.card {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 0.65rem;
+  margin-top: 1rem;
 }
 
 .contact-grid a,
@@ -331,6 +332,68 @@ article.card {
   border-color: rgba(255, 122, 24, 0.45);
 }
 
+.privacy-note {
+  color: var(--muted);
+  font-size: 0.94rem;
+}
+
+.contact-form {
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--stroke);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.6);
+  display: grid;
+  gap: 0.8rem;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.contact-form label {
+  display: grid;
+  gap: 0.35rem;
+  font-weight: 600;
+  color: #1a2b40;
+  font-size: 0.94rem;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  font: inherit;
+  color: #132033;
+  background: #ffffff;
+  border: 1px solid rgba(19, 32, 51, 0.18);
+  border-radius: 10px;
+  padding: 0.62rem 0.72rem;
+}
+
+.contact-form input:focus,
+.contact-form textarea:focus {
+  outline: none;
+  border-color: rgba(255, 122, 24, 0.65);
+  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.14);
+}
+
+.form-status {
+  margin: 0;
+  min-height: 1.25rem;
+  font-size: 0.92rem;
+  color: #1f3c5f;
+}
+
+.hp-field {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
 .site-footer {
   text-align: center;
   padding: 0 1rem 2.1rem;
@@ -401,6 +464,10 @@ article.card {
     justify-self: center;
   }
 
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
   .timeline {
     padding-left: 0.8rem;
   }