Remove service selection field from contact form - simplify form to just name, email, and message

src/api/contact.ts

@@ -5,7 +5,6 @@ import { sendEmail } from '../lib/email.js'
 interface FormData {
   name: string
   email: string
-  service: string
   message: string
   website?: string // Honeypot field
 }
@@ -24,10 +23,6 @@ const validateInput = (data: FormData): { isValid: boolean; error?: string } =>
     return { isValid: false, error: 'Invalid email format' }
   }
 
-  if (!data.service) {
-    return { isValid: false, error: 'Service selection required' }
-  }
-
   if (!data.message || data.message.length < 10 || data.message.length > 1000) {
     return { isValid: false, error: 'Invalid message length' }
   }
@@ -99,7 +94,6 @@ export async function POST(req: Request) {
     const sanitizedData = {
       name: sanitizeInput(data.name),
       email: sanitizeInput(data.email),
-      service: sanitizeInput(data.service),
       message: sanitizeInput(data.message)
     }
 

src/lib/email.ts

@@ -3,7 +3,6 @@ import nodemailer from 'nodemailer'
 interface EmailData {
   name: string
   email: string
-  service: string
   message: string
 }
 
@@ -26,14 +25,13 @@ export async function sendEmail(data: EmailData) {
   const mailOptions = {
     from: process.env.GOOGLE_EMAIL,
     to: process.env.RECIPIENT_EMAIL,
-    subject: `New Contact Form Submission - ${data.service}`,
+    subject: 'New Contact Form Submission',
     html: `
       <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
         <h2 style="color: #2563eb;">New Contact Form Submission</h2>
         <div style="background-color: #f3f4f6; padding: 20px; border-radius: 8px;">
           <p><strong>Name:</strong> ${data.name}</p>
           <p><strong>Email:</strong> ${data.email}</p>
-          <p><strong>Service:</strong> ${data.service}</p>
           <p><strong>Message:</strong></p>
           <p style="white-space: pre-wrap;">${data.message}</p>
         </div>

src/pages/Contact.tsx

@@ -9,7 +9,6 @@ const Contact = () => {
   const [formData, setFormData] = useState({
     name: '',
     email: '',
-    service: '',
     message: '',
     website: '' // Honeypot field
   })
@@ -32,7 +31,7 @@ const Contact = () => {
 
       if (data.success) {
         showNotification('Message sent successfully!', 'success')
-        setFormData({ name: '', email: '', service: '', message: '', website: '' })
+        setFormData({ name: '', email: '', message: '', website: '' })
       } else {
         showNotification(data.message || 'Failed to send message', 'error')
       }
@@ -130,25 +129,6 @@ const Contact = () => {
               />
             </div>
 
-            <div>
-              <label htmlFor="service" className="block text-accent-mountain mb-2 text-sm sm:text-base">
-                Service Interested In
-              </label>
-              <select
-                id="service"
-                value={formData.service}
-                onChange={(e) => setFormData({ ...formData, service: e.target.value })}
-                className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
-                         text-base sm:text-lg bg-white"
-                required
-              >
-                <option value="">Select a service</option>
-                <option value="Universal Website Design">Universal Website Design</option>
-                <option value="Board Communication">Board Communication</option>
-                <option value="Training & Workshops">Training & Workshops</option>
-              </select>
-            </div>
-
             {/* Honeypot field - hidden from humans, visible to bots */}
             <div className="absolute left-[-5000px] opacity-0" aria-hidden="true">
               <label htmlFor="website">Website</label>