Made Newsletter Working (#175)

bytemakers · Oct 19, 2022 · 61c67bc · 61c67bc
2 parents 25b48c0 + 9436ea3
commit 61c67bc
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/frontend/src/components/LandingPage/Components/Newsletter/NewsLetter.js b/frontend/src/components/LandingPage/Components/Newsletter/NewsLetter.js
@@ -1,27 +1,39 @@
 import React from "react";
 import "./NewsLetter.css";
+import { useForm, ValidationError } from '@formspree/react';
 
 const NewsLetter = () => {
+    const [state, handleSubmit] = useForm("myyvppav");
+    if (state.succeeded) {
+        return <p>Thanks for joining! You'll be updated!</p>;
+    }
     return (
         <section className="newsletter-section flex p-4 bg-primary">
-            <form action="" class="newsletter__form text-center">
+            <form onSubmit={handleSubmit} class="newsletter__form text-center">
                 <h2>Subscribe to Our Newsletter</h2>
                 <h4 class="mb-1">You won’t get dissapointed by us</h4>
                 <label for="mail"></label>
                 <div class="newsletter__form__email flex">
                     <input
-                        type="text"
+                        type="email"
                         placeholder="Your Email"
                         name="mail"
                         required
                         class="newsletter__form__email__your_email"
                     />
+                    <ValidationError 
+                        prefix="Email" 
+                        field="email"
+                        errors={state.errors}
+                    />
                     <input
                         type="submit"
                         value="Subscribe"
                         class="newsletter__form__email__submit_btn bg-primary"
+                        disabled={state.submitting}
                     />
                 </div>
+                {/*
                 <div class="newsletter__form__email_copy flex mt-1">
                     <label class="newsletter__form__email_copy__label">
                         <input
@@ -33,6 +45,7 @@ const NewsLetter = () => {
 
                     <span class="text-left">Email me a copy of my responses</span>
                 </div>
+                */}
             </form>
         </section>
     );