Implement sending email from general contact us form (#39)

* Created message box in contact us forms * Modify CSS and make responsive * Implement email sending using formsubmit.co * Added padding to input components * Resolve different package-lock.json * Add .env.example --------- Co-authored-by: izruff <[email protected]>
nuansacp2025 · Oct 3, 2024 · 8d3f9bd · 8d3f9bd
1 parent 500bb6c
commit 8d3f9bd
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 30 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_FORMSUBMIT_KEY=your-email-or-random-string
diff --git a/app/components/contact-us/business-form.tsx b/app/components/contact-us/business-form.tsx
@@ -1,4 +1,13 @@
+"use client"
+import { useState } from "react"
+
 export default function BusinessForm() {
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [category, setCategory] = useState("");
+    const [message, setMessage] = useState("");
+
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
@@ -9,18 +18,18 @@ export default function BusinessForm() {
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">
                     <div className="col-span-2">
                         <label htmlFor="name" className="text-md sm:text-lg">Name</label>
-                        <input type="text" id="name" name="name" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="email" className="text-md sm:text-lg">Email</label>
-                        <input type="text" id="email" name="email" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="phone-number" className="text-md sm:text-lg">Phone Number</label>
-                        <input type="text" id="phone-number" name="phone-number" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="phone-number" name="phone-number" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="category" className="text-md sm:text-lg">Category</label>
@@ -31,8 +40,14 @@ export default function BusinessForm() {
                     </div>
                     <div className="col-span-2">
                     <label htmlFor="proposal" className="text-md sm:text-lg">Corporate Proposal (PDF)</label>
-                        <input type="file" id="proposal" name="proposal" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="file" id="proposal" name="proposal" value={category} onChange={(e) => setCategory(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                    </div>
+                    <div className="col-span-2">
+                        <label htmlFor="message" className="text-md sm:text-lg">Message</label>
+                        <div>
+                            <textarea name="message" id="message" value={message} onChange={(e) => setMessage(e.target.value)} className="resize-none block w-full rounded-md h-40 border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"></textarea>
+                        </div>
                     </div>
                 </div>
                 <div className="mt-10">

diff --git a/app/components/contact-us/general-form.tsx b/app/components/contact-us/general-form.tsx
@@ -1,31 +1,48 @@
+"use client"
+import { useState } from "react"
+
 export default function GeneralForm() {
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [category, setCategory] = useState("");
+    const [message, setMessage] = useState("");
+
+    const formSubmitKey = process.env.NEXT_PUBLIC_FORMSUBMIT_KEY;
+
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
                 <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Contact Us</h2>
                 <p className="text-md sm:text-lg my-4">Feel free to reach out through the form below!</p>
             </div>
-            <form action="#" className="w-full">
+            <form action={`https://formsubmit.co/${formSubmitKey}`} method="POST" className="w-full">
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">
                     <div className="col-span-2">
                         <label htmlFor="name" className="text-md sm:text-lg">Name</label>
-                        <input type="text" id="name" name="name" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="email" className="text-md sm:text-lg">Email</label>
-                        <input type="text" id="email" name="email" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="phone-number" className="text-md sm:text-lg">Phone Number</label>
-                        <input type="text" id="phone-number" name="phone-number" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="phone-number" name="phone-number" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="category" className="text-md sm:text-lg">Category</label>
-                        <input type="text" id="category" name="category" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="category" name="category" value={category} onChange={(e) => setCategory(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
+                    </div>
+                    <div className="col-span-2">
+                        <label htmlFor="message" className="text-md sm:text-lg">Message</label>
+                        <div>
+                            <textarea name="message" id="message" value={message} onChange={(e) => setMessage(e.target.value)} className="resize-none block w-full rounded-md h-40 border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"></textarea>
+                        </div>
                     </div>
                 </div>
                 <div className="mt-10">

diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
@@ -5,21 +5,21 @@ import GeneralForm from "@/app/components/contact-us/general-form";
 export default function ContactPage() {
     return (
         <div className="items-center bg-teal-950 space-y-20 px-4 md:px-12 lg:px-16 pb-12">
-            <div className="grid grid-cols-2 text-white py-10">
-                <div className="place-self-center mx-auto my-auto">
+            <div className="sm:grid sm:grid-cols-2 text-white py-10">
+                <div className="sm:place-self-center mx-auto my-auto">
                     <GeneralForm/>
                 </div>
-                <div className="place-self-center">
+                <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
             </div>
-            <div className="grid grid-cols-2 bg-amber-50 rounded-md text-black bottom-8 py-10">
-                <div className="place-self-center">
+            <div className="sm:grid sm:grid-cols-2 bg-amber-50 rounded-md text-black bottom-8 p-10">
+                <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>
                 </div>
-                <div className="place-self-center">
+                <div className="sm:place-self-center">
                     <BusinessForm/>
                 </div>
             </div>

diff --git a/package-lock.json b/package-lock.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		NEXT_PUBLIC_FORMSUBMIT_KEY=your-email-or-random-string