Refactor contact form handling: Simplified JSON parsing and improved error messaging in both client and server scripts for better user experience and feedback.

functions/contact.js

@@ -1,38 +1,12 @@
 export async function onRequestPost(context) {
   try {
-    let requestData;
-    try {
-      requestData = await context.request.json();
-    } catch (parseError) {
-      return new Response(
-        JSON.stringify({ 
-          error: 'Invalid request data - please provide valid JSON' 
-        }),
-        { 
-          status: 400, 
-          headers: { 
-            'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': '*'
-          } 
-        }
-      );
-    }
-
-    const { name, email, subject, message } = requestData;
+    const { name, email, subject, message } = await context.request.json();
 
     // Validate inputs
     if (!name || !email || !subject || !message) {
       return new Response(
-        JSON.stringify({ 
-          error: 'All fields are required' 
-        }),
-        { 
-          status: 400, 
-          headers: { 
-            'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': '*'
-          } 
-        }
+        JSON.stringify({ error: 'All fields are required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
       );
     }
 
@@ -58,49 +32,18 @@ export async function onRequestPost(context) {
       })
     });
 
-    const responseData = await response.json();
-
     if (!response.ok) {
-      console.error('Resend API error:', responseData);
-      return new Response(
-        JSON.stringify({ 
-          error: 'Failed to send email' 
-        }),
-        { 
-          status: 500, 
-          headers: { 
-            'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': '*'
-          } 
-        }
-      );
+      throw new Error('Failed to send email');
     }
 
     return new Response(
-      JSON.stringify({ 
-        message: 'Message sent successfully!' 
-      }),
-      { 
-        status: 200, 
-        headers: { 
-          'Content-Type': 'application/json',
-          'Access-Control-Allow-Origin': '*'
-        } 
-      }
+      JSON.stringify({ message: 'Message sent successfully!' }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
     );
   } catch (error) {
-    console.error('Server error:', error);
     return new Response(
-      JSON.stringify({ 
-        error: 'An unexpected error occurred' 
-      }),
-      { 
-        status: 500, 
-        headers: { 
-          'Content-Type': 'application/json',
-          'Access-Control-Allow-Origin': '*'
-        } 
-      }
+      JSON.stringify({ error: 'Failed to send message' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
     );
   }
 } 

script.js

@@ -141,7 +141,7 @@ if (contactForm) {
                 message: formData.get('message')
             };
             
-            const response = await fetch('/functions/contact', {
+            const response = await fetch('/contact', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
@@ -149,38 +149,31 @@ if (contactForm) {
                 body: JSON.stringify(data)
             });
             
-            let responseData;
-            const responseText = await response.text();
-            try {
-                responseData = JSON.parse(responseText);
-            } catch (parseError) {
-                console.error('Failed to parse response:', responseText);
-                throw new Error('Invalid server response');
+            const result = await response.json();
+            
+            if (response.ok) {
+                // Show success message
+                const successMessage = document.createElement('div');
+                successMessage.className = 'alert alert-success';
+                successMessage.innerHTML = '<i class="fas fa-check-circle"></i> Message sent successfully! We\'ll get back to you soon.';
+                contactForm.insertBefore(successMessage, submitButton);
+                contactForm.reset();
+                
+                // Remove success message after 5 seconds
+                setTimeout(() => {
+                    successMessage.remove();
+                }, 5000);
+            } else {
+                throw new Error(result.error || 'Failed to send message');
             }
             
-            if (!response.ok) {
-                throw new Error(responseData.error || 'Failed to send email');
-            }
-            
-            // Show success message
-            const successMessage = document.createElement('div');
-            successMessage.className = 'alert alert-success';
-            successMessage.innerHTML = '<i class="fas fa-check-circle"></i> Message sent successfully! We\'ll get back to you soon.';
-            contactForm.insertBefore(successMessage, submitButton);
-            contactForm.reset();
-            
-            // Remove success message after 5 seconds
-            setTimeout(() => {
-                successMessage.remove();
-            }, 5000);
-            
         } catch (error) {
             console.error('Error sending email:', error);
             
             // Show error message
             const errorMessage = document.createElement('div');
             errorMessage.className = 'alert alert-error';
-            errorMessage.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + error.message;
+            errorMessage.innerHTML = '<i class="fas fa-exclamation-circle"></i> Failed to send message. Please try again later.';
             contactForm.insertBefore(errorMessage, submitButton);
             
             // Remove error message after 5 seconds