contact form mailing created

swapnil2597 · swapnil2597 · commit f1f6fd36190f · 2024-07-07T19:21:14.000+05:30
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<title>Stoman</title>
+		<title>Swapnil Khare</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/contact/ContactDetails.jsx b/src/components/contact/ContactDetails.jsx
@@ -3,17 +3,17 @@ import { FiPhone, FiMapPin, FiMail } from 'react-icons/fi';
 const contacts = [
 	{
 		id: 1,
-		name: 'Your Address, Your City, Your Country',
+		name: 'Bhopal, Madhya Pradesh, India',
 		icon: <FiMapPin />,
 	},
 	{
 		id: 2,
-		name: 'email@domain.com',
+		name: 'swapnil.khare25@gmail.com',
 		icon: <FiMail />,
 	},
 	{
 		id: 3,
-		name: '555 8888 888',
+		name: '+91 79970 83838',
 		icon: <FiPhone />,
 	},
 ];
diff --git a/src/components/contact/ContactForm.jsx b/src/components/contact/ContactForm.jsx
@@ -1,19 +1,45 @@
 import Button from '../reusable/Button';
 import FormInput from '../reusable/FormInput';
+import { useState } from 'react';
 
 const ContactForm = () => {
+	const [result, setResult] = useState("");
+
+	const handleFormSubmit = async (event) => {
+		event.preventDefault();
+		setResult("Sending....");
+		const formData = new FormData(event.target);
+	
+		formData.append("access_key", "1e38f9db-eca6-4656-9799-d53c8fdbdf1b");
+	
+		const response = await fetch("https://api.web3forms.com/submit", {
+		  method: "POST",
+		  body: formData
+		});
+	
+		const data = await response.json();
+	
+		if (data.success) {
+		  setResult("Form Submitted Successfully");
+		  alert("Form Submitted Successfully");
+		  event.target.reset();
+		} else {
+		  console.log("Error", data);
+		  setResult(data.message);
+		}
+	  };
+
 	return (
 		<div className="w-full lg:w-1/2">
 			<div className="leading-loose">
 				<form
-					onSubmit={(e) => {
-						e.preventDefault();
-					}}
+					onSubmit={handleFormSubmit}
 					className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
 				>
 					<p className="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8">
 						Contact Form
 					</p>
+					<input type="hidden" name="access_key" value="1e38f9db-eca6-4656-9799-d53c8fdbdf1b"></input>
 					<FormInput
 						inputLabel="Full Name"
 						labelFor="name"
@@ -67,6 +93,7 @@ const ContactForm = () => {
 						/>
 					</div>
 				</form>
+				<span>{result}</span>
 			</div>
 		</div>
 	);
diff --git a/src/components/shared/AppFooterCopyright.jsx b/src/components/shared/AppFooterCopyright.jsx
@@ -4,19 +4,19 @@ function AppFooterCopyright() {
 			<div className="text-lg text-ternary-dark dark:text-ternary-light">
 				&copy; {new Date().getFullYear()}
 				<a
-					href="https://github.com/realstoman/react-tailwindcss-portfolio"
+					href="/"
 					target="__blank"
 					className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
-					React & Tailwind CSS Portfolio
+					Web Portfolio
 				</a>
 				.
 				<a
 					href="https://stoman.me"
 					target="__blank"
 					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
-					Stoman
+					Swapnil Khare
 				</a>
 			</div>
 		</div>
