the contact form is broken. improve it

index.html

@@ -370,35 +370,38 @@
               </a>
             </div>
           </div>
-
           <form id="contact-form" class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.7)] p-6">
             <div class="grid grid-cols-2 gap-4">
               <div class="col-span-2 sm:col-span-1">
-                <label class="label">Name</label>
-                <input type="text" required placeholder="Jane Doe" />
+                <label for="name" class="label">Name *</label>
+                <input type="text" id="name" name="name" required placeholder="Jane Doe" class="form-field-input" />
+                <div class="error-message hidden" id="name-error">Please enter your name</div>
               </div>
               <div class="col-span-2 sm:col-span-1">
-                <label class="label">Email</label>
-                <input type="email" required placeholder="jane@company.com" />
+                <label for="email" class="label">Email *</label>
+                <input type="email" id="email" name="email" required placeholder="jane@company.com" class="form-field-input" />
+                <div class="error-message hidden" id="email-error">Please enter a valid email address</div>
               </div>
               <div class="col-span-2">
-                <label class="label">Subject</label>
-                <input type="text" required placeholder="Let’s collaborate on a new project" />
+                <label for="subject" class="label">Subject *</label>
+                <input type="text" id="subject" name="subject" required placeholder="Let’s collaborate on a new project" class="form-field-input" />
+                <div class="error-message hidden" id="subject-error">Please enter a subject</div>
               </div>
               <div class="col-span-2">
-                <label class="label">Message</label>
-                <textarea rows="5" required placeholder="Tell me about your goals and timeline..."></textarea>
+                <label for="message" class="label">Message *</label>
+                <textarea id="message" name="message" rows="5" required placeholder="Tell me about your goals and timeline..." class="form-field-input"></textarea>
+                <div class="error-message hidden" id="message-error">Please enter your message</div>
               </div>
             </div>
             <div class="mt-6 flex items-center gap-3">
-              <button type="submit" class="btn-primary">
+              <button type="submit" id="submit-btn" class="btn-primary">
                 <i data-feather="send"></i>
-                Send message
+                <span id="submit-text">Send message</span>
               </button>
               <span id="form-status" class="text-sm text-zinc-400"></span>
             </div>
           </form>
-        </div>
+</div>
       </div>
     </section>
   </main>

script.js

@@ -45,20 +45,138 @@ window.addEventListener('scroll', () => {
   backToTop?.classList.toggle('pointer-events-auto', scrolled > 400);
 });
 backToTop?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
-
-// Contact form (demo)
+// Contact form with validation
 const form = document.getElementById('contact-form');
 const status = document.getElementById('form-status');
-form?.addEventListener('submit', (e) => {
+const submitBtn = document.getElementById('submit-btn');
+const submitText = document.getElementById('submit-text');
+
+// Validation functions
+function validateEmail(email) {
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(email);
+}
+
+function validateForm() {
+  let isValid = true;
+  
+  // Clear previous errors
+  document.querySelectorAll('.error-message').forEach(error => {
+    error.classList.add('hidden');
+  });
+  document.querySelectorAll('.form-field-input').forEach(input => {
+    input.classList.remove('error');
+  });
+
+  // Get form data
+  const formData = new FormData(form);
+  const name = formData.get('name')?.trim();
+  const email = formData.get('email')?.trim();
+  const subject = formData.get('subject')?.trim();
+  const message = formData.get('message')?.trim();
+
+  // Validate name
+  if (!name) {
+    document.getElementById('name-error').classList.remove('hidden');
+    document.getElementById('name').classList.add('error');
+    isValid = false;
+  }
+
+  // Validate email
+  if (!email || !validateEmail(email)) {
+    document.getElementById('email-error').classList.remove('hidden');
+    document.getElementById('email').classList.add('error');
+    isValid = false;
+  }
+
+  // Validate subject
+  if (!subject) {
+    document.getElementById('subject-error').classList.remove('hidden');
+    document.getElementById('subject').classList.add('error');
+    isValid = false;
+  }
+
+  // Validate message
+  if (!message) {
+    document.getElementById('message-error').classList.remove('hidden');
+    document.getElementById('message').classList.add('error');
+    isValid = false;
+  } else if (message.length < 10) {
+    document.getElementById('message-error').textContent = 'Message must be at least 10 characters long';
+    document.getElementById('message-error').classList.remove('hidden');
+    document.getElementById('message').classList.add('error');
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+// Clear errors on input
+document.querySelectorAll('.form-field-input').forEach(input => {
+  input.addEventListener('input', () => {
+    const errorElement = document.getElementById(input.id + '-error');
+    if (errorElement) {
+      errorElement.classList.add('hidden');
+    }
+    input.classList.remove('error');
+  });
+});
+
+form?.addEventListener('submit', async (e) => {
   e.preventDefault();
-  const data = Object.fromEntries(new FormData(form).entries());
-  status.textContent = 'Sending...';
-  setTimeout(() => {
-    status.textContent = 'Thanks! I’ll get back to you soon.';
+  
+  if (!validateForm()) {
+    status.textContent = 'Please fix the errors above';
+    status.classList.add('text-red-400');
+    status.classList.remove('text-zinc-400');
+    return;
+  }
+
+  // Reset status
+  status.textContent = '';
+  status.classList.remove('text-red-400');
+  status.classList.add('text-zinc-400');
+
+  // Disable form and show loading state
+  submitBtn.disabled = true;
+  submitText.textContent = 'Sending...';
+  submitBtn.classList.add('opacity-75');
+
+  try {
+    // Simulate form submission (replace with actual endpoint)
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+    
+    // Simulate API call delay
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    // For demo purposes, just log the data
+    console.log('Form submitted:', data);
+    
+    // Success
+    status.textContent = '✓ Message sent successfully! I\'ll get back to you soon.';
+    status.classList.remove('text-zinc-400');
+    status.classList.add('text-emerald-400');
+    
     form.reset();
-  }, 800);
+    
+    // Reset button state
+    submitBtn.disabled = false;
+    submitText.textContent = 'Send message';
+    submitBtn.classList.remove('opacity-75');
+    
+  } catch (error) {
+    console.error('Form submission error:', error);
+    status.textContent = '✗ Something went wrong. Please try again or email me directly.';
+    status.classList.remove('text-zinc-400');
+    status.classList.add('text-red-400');
+    
+    // Reset button state
+    submitBtn.disabled = false;
+    submitText.textContent = 'Send message';
+    submitBtn.classList.remove('opacity-75');
+  }
 });
-
 // Projects data
 const projects = [
   {

style.css

@@ -84,35 +84,56 @@ html.light .chip {
   border-color: rgba(15, 23, 42, 0.1);
   color: rgb(71, 85, 105);
 }
-
-/* Form enhancements */
-.form-field {
+/* Enhanced Form Styling */
+.form-field-input {
+  @apply w-full rounded-lg border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 pl-4 pr-4 py-3 outline-none transition-all duration-200;
   position: relative;
 }
 
-.form-input {
-  @apply w-full rounded-lg border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 pl-4 pr-4 py-3 outline-none transition-all duration-200;
+.form-field-input:focus {
+  @apply border-[color:rgb(var(--color-primary-500)_/_0.6)] ring-2 ring-[color:rgb(var(--color-primary-500)_/_0.2)];
 }
 
-.form-input:focus {
-  @apply border-[color:rgb(var(--color-primary-500)_/_0.6)] ring-2 ring-[color:rgb(var(--color-primary-500)_/_0.2)];
+.form-field-input.error {
+  @apply border-red-500 ring-2 ring-red-500/20;
 }
 
-.form-input::placeholder {
+.form-field-input::placeholder {
   @apply text-zinc-500;
 }
 
+/* Error messages */
+.error-message {
+  @apply text-red-400 text-xs mt-1 block;
+}
+
 /* Light theme form inputs */
-html.light .form-input {
+html.light .form-field-input {
   background: rgba(255, 255, 255, 0.8);
   border-color: rgba(15, 23, 42, 0.15);
   color: rgb(15, 23, 42);
 }
 
-html.light .form-input::placeholder {
+html.light .form-field-input::placeholder {
   color: rgb(100, 116, 139);
 }
 
+html.light .form-field-input.error {
+  @apply border-red-500 ring-red-500/30;
+}
+
+html.light .error-message {
+  @apply text-red-600;
+}
+
+/* Button loading state */
+.btn-primary:disabled {
+  @apply opacity-75 cursor-not-allowed;
+}
+
+.btn-primary:disabled:hover {
+  @apply scale-100;
+}
 * { -webkit-tap-highlight-color: transparent; }
 
 html, body {