JMAP

src/components/ContactForm.tsx

@@ -4,6 +4,7 @@ import { Show } from "solid-js/web";
 const ContactForm: Component = () => {
   const [email, setEmail] = createSignal("");
   const [message, setMessage] = createSignal("");
+  const [name, setName] = createSignal("");
   const [status, setStatus] = createSignal<
     "idle" | "sending" | "success" | "error"
   >("idle");
@@ -17,35 +18,51 @@ const ContactForm: Component = () => {
     try {
       const response = await fetch("/api/contact", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          email: email(),
-          message: message(),
+          subject: `New Contact Form Message from ${name()}`,
+          message: `From: ${name()}\nEmail: ${email()}\n\nMessage:\n${message()}`,
         }),
       });
 
+      const data = await response.json();
+
       if (!response.ok) {
-        throw new Error("Failed to send message");
+        throw new Error(data.error || data.message || "Failed to send message");
       }
 
       setStatus("success");
+      setName("");
       setEmail("");
       setMessage("");
-
-      // Reset success status after 3 seconds
       setTimeout(() => setStatus("idle"), 3000);
     } catch (error) {
       setStatus("error");
       setErrorMessage(
         error instanceof Error ? error.message : "Failed to send message",
       );
+      console.error("Submission error:", error);
     }
   };
 
   return (
     <form class="space-y-6" onSubmit={handleSubmit}>
+      <div class="form-control w-full">
+        <label for="name" class="label">
+          <span class="label-text text-neutral-content">Name</span>
+        </label>
+        <input
+          type="text"
+          id="name"
+          required
+          class="input input-bordered w-full"
+          placeholder="Your Name"
+          value={name()}
+          onInput={(e) => setName(e.currentTarget.value)}
+          disabled={status() === "sending"}
+        />
+      </div>
+
       <div class="form-control w-full">
         <label for="email" class="label">
           <span class="label-text text-neutral-content">Email</span>