Fix form + better updates + fix token

devashish2024 · Apr 5, 2024 · 15be02c · 15be02c
1 parent f3500d3
commit 15be02c
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ First, get a Web3Forms token at [here](https://web3forms.com/)
 
 Then, make file `.env.local` in the root of project, with TOKEN as your token.
 ```env
-TOKEN=YOUR_WEB3FORM_TOKEN
+NEXT_PUBLIC_TOKEN=YOUR_WEB3FORM_TOKEN
 ```
 
 Then, install packages

diff --git a/public/linkedin-icon.svg b/public/linkedin-icon.svg
diff --git a/src/app/components/EmailSection.jsx b/src/app/components/EmailSection.jsx
@@ -3,31 +3,30 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import LinkedinIcon from "../../../public/linkedin-icon.svg";
 import GithubIcon from "../../../public/github-icon.svg";
 
 export const EmailSection = () => {
   const [emailSubmitted, setEmailSubmitted] = useState(false);
-   async function handleSubmit(e) {
-     e.preventDefault();
-     const response = await fetch("https://api.web3forms.com/submit", {
-       method: "POST",
-       headers: {
-         "Content-Type": "application/json",
-         Accept: "application/json",
-       },
-       body: JSON.stringify({
-         access_key: process.env.TOKEN,
-         name: e.target.name.value,
-         email: e.target.email.value,
-         message: e.target.message.value,
-       }),
-     });
-     const result = await response.json();
-     if (result.success) {
-       setEmailSubmitted(true);
-     }
-   }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const response = await fetch("https://api.web3forms.com/submit", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        access_key: process.env.NEXT_PUBLIC_TOKEN,
+        subject: e.target.subject.value,
+        email: e.target.email.value,
+        message: e.target.message.value,
+      }),
+    });
+    const result = await response.json();
+    if (result.success) {
+      setEmailSubmitted(true);
+    }
+  }
   return (
     <section
       className="grid md:grid-cols-2 my-12 md:my-12 py-24 gap-4 relative"
@@ -44,7 +43,8 @@ export const EmailSection = () => {
         </p>
         <p className="text-[#ADB7BE] mb-4 max-w-md">
           <i>
-            If you cannot send email through the form, feel free to email me (this form is on a monthly limit, so it might not work at all).
+            If you cannot send email through the form, feel free to email me
+            (this form is on a monthly limit, so it might not work at all).
           </i>
         </p>
         <div className="socials flex flex-row gap-2">
@@ -57,63 +57,68 @@ export const EmailSection = () => {
         </div>
       </div>
       <div>
-        <form className="flex flex-col" onSubmit={handleSubmit}>
-          <div className="mb-6">
-            <label
-              htmlFor="email"
-              className="text-white block text-sm font-medium mb-2"
+        {emailSubmitted ? (
+          <form className="flex flex-col" onSubmit={handleSubmit}>
+            <div className="mb-6">
+              <p className="text-green-500 text-sm mt-2">
+                Thank you for your email! I will get back to you soon.
+              </p>
+            </div>
+          </form>
+        ) : (
+          <form className="flex flex-col" onSubmit={handleSubmit}>
+            <div className="mb-6">
+              <label
+                htmlFor="email"
+                className="text-white block text-sm font-medium mb-2"
+              >
+                Your email
+              </label>
+              <input
+                name="email"
+                type="email"
+                id="email"
+                className="bg-[#18191E] border border-[#33353F] placeholder-[#93A2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
+                required
+                placeholder="[email protected]"
+              />
+            </div>
+            <div className="mb-6">
+              <label
+                htmlFor="subject"
+                className="text-white block text-sm font-medium mb-2"
+              >
+                Subject
+              </label>
+              <input
+                name="subject"
+                type="text"
+                id="subject"
+                className="bg-[#18191E] border border-[#33353F] placeholder-[#93A2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
+                required
+                placeholder="Just saying hi"
+              />
+            </div>
+            <div className="mb-6">
+              <label
+                htmlFor="message"
+                className="text-white block text-sm mb-2 font-medium"
+              ></label>
+              <textarea
+                name="message"
+                id="message"
+                className="bg-[#18191E] border border-[#33353F] placeholder-[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
+                placeholder="Let's talk about..."
+              />
+            </div>
+            <button
+              type="submit"
+              className="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2.5 px-5 rounded-lg w-full"
             >
-              Your email
-            </label>
-            <input
-              name="email"
-              type="email"
-              id="email"
-              className="bg-[#18191E] border border-[#33353F] placeholder-[#93A2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
-              required
-              placeholder="[email protected]"
-            />
-          </div>
-          <div className="mb-6">
-            <label
-              htmlFor="subject"
-              className="text-white block text-sm font-medium mb-2"
-            >
-              Subject
-            </label>
-            <input
-              name="subject"
-              type="text"
-              id="subject"
-              className="bg-[#18191E] border border-[#33353F] placeholder-[#93A2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
-              required
-              placeholder="Just saying hi"
-            />
-          </div>
-          <div className="mb-6">
-            <label
-              htmlFor="message"
-              className="text-white block text-sm mb-2 font-medium"
-            ></label>
-            <textarea
-              name="message"
-              id="message"
-              className="bg-[#18191E] border border-[#33353F] placeholder-[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5 focus:outline focus:outline-primary-500"
-              placeholder="Let's talk about..."
-            />
-          </div>
-          <button
-            type="submit"
-            className="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2.5 px-5 rounded-lg w-full"
-          >
-            Submit
-          </button>
-          {emailSubmitted && (
-            <p className="text-red-500 text-sm mt-2">
-              Email part hasn&apos;t been implemented yet, sorry!
-            </p>
-          )}
-        </form>
+              Submit
+            </button>
+          </form>
+        )}
       </div>
     </section>
   );