Thank you after contact form success

pixlie · Oct 9, 2024 · 73c9677 · 73c9677
1 parent fa26ac3
commit 73c9677
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 28 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-
 import Hero from '~/components/widgets/Hero.astro';
 // import Note from '~/components/widgets/Note.astro';
 import Features from '~/components/widgets/Features.astro';

diff --git a/src/solidComponents/widgets/Contact.tsx b/src/solidComponents/widgets/Contact.tsx
@@ -8,34 +8,32 @@ interface IFormData {
 }
 
 const Contact: Component = () => {
-  {
-    /* <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
-  <Headline title={title} subtitle={subtitle} tagline={tagline} /> */
-  }
   const [formData, setFormData] = createSignal<IFormData>({
     name: '',
     email: '',
     message: '',
   });
   const sendFormData = async () => {
     if (!formData().name || !formData().email) {
-      return;
+      return false;
     }
-    const reponse = await fetch("https://website-api.pixlie.com/contact", {
-      method: "POST",
+    const response = await fetch('https://website-api.pixlie.com/contact', {
+      method: 'POST',
       body: JSON.stringify(formData()),
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
     });
-    console.log(await reponse.json());
-  }
-  const [_, {refetch: submitFormData}] = createResource(sendFormData)
+    if (response.ok) {
+      return true;
+    }
+    return false;
+  };
+  const [submitted, { refetch: submitFormData }] = createResource(sendFormData);
 
   const handleChange = (e: Event) => {
     const target = e.target as HTMLInputElement | HTMLTextAreaElement;
     setFormData((prev) => ({ ...prev, [target.name]: target.value }));
-    console.log(formData());
   };
 
   const handleSubmit = (e: Event) => {
@@ -45,24 +43,27 @@ const Contact: Component = () => {
 
   return (
     <div class="flex flex-col max-w-xl mx-auto rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow p-4 sm:p-6 lg:p-8 w-full">
-      <form onSubmit={handleSubmit}>
-        <Input label="Name" name="name" placeholder="Name" value={formData().name} onChange={handleChange} />
-        <Input label="Email" name="email" placeholder="Email" value={formData().email} onChange={handleChange} />
-        <Textarea
-          label="Message"
-          name="message"
-          placeholder="Message"
-          value={formData().message}
-          onChange={handleChange}
-        />
+      {submitted() ? (
+        <div class="py-8">Thank you {formData().name.split(' ')[0]}!</div>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <Input label="Name" name="name" placeholder="Name" value={formData().name} onChange={handleChange} />
+          <Input label="Email" name="email" placeholder="Email" value={formData().email} onChange={handleChange} />
+          <Textarea
+            label="Message"
+            name="message"
+            placeholder="Message"
+            value={formData().message}
+            onChange={handleChange}
+          />
 
-        <div class="mt-10 grid">
-          <button class="btn btn-primary">Contact us</button>
-        </div>
-      </form>
+          <div class="mt-10 grid">
+            <button class="btn btn-primary">Contact us</button>
+          </div>
+        </form>
+      )}
     </div>
   );
-  // </WidgetWrapper>
 };
 
 export default Contact;