fixing contacts

package.json

@@ -34,6 +34,7 @@
  "postcss": "8.4.26",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-toastify": "^10.0.5",
  "remark": "^14.0.3",
  "remark-html": "^15.0.2",
  "tailwindcss": "3.3.3"

src/pages/_app.tsx

@@ -13,7 +13,9 @@ import '../styles/special-classes.css'
 import '../styles/responsive.css'
 import '../styles/owl.carousel.min.css'
 import '../styles/owl.theme.default.min.css'
+import "react-toastify/dist/ReactToastify.css";
 import Script from "next/script";
+import { ToastContainer } from "react-toastify"
 
 export default function App({Component, pageProps}: AppProps) {
  useEffect(() => {
@@ -29,6 +31,7 @@ export default function App({Component, pageProps}: AppProps) {
  <main>
  <Header/>
  <Component {...pageProps} />
+ <ToastContainer />
  <Footer/>
 
  <Script type="text/javascript" src="./js/jquery-3.6.0.min.js" strategy={"beforeInteractive"}/>

src/pages/contact.tsx

@@ -2,32 +2,51 @@ import React, {useRef, useState} from "react";
 import {ContactForm} from "../components/ContactForm";
 import {useRouter} from "next/router";
 import Link from "next/link";
+import { toast } from "react-toastify";
 
 export default function Contact() {
- const router = useRouter()
- const {email} = router.query
- const [message, setMessage] = useState("");
- const formRef = useRef();
- // @ts-ignore
- const submitContact = async (e) => {
- e.preventDefault();
- console.log(e.target[0].value);
- console.log(e.target[1].value);
- console.log(e.target[2].value);
- const res = await ContactForm({
- name: e.target[0].value,
- email: e.target[1].value,
- comment: e.target[2].value,
- });
- if (res == 0) {
- setMessage("Thank you for your valuable comment!");
- // @ts-ignore
- formRef.current.reset();
- } else {
- setMessage("Something went wrong! Please try again");
- }
+ const router = useRouter();
+ const { email } = router.query;
+ const [message, setMessage] = useState("");
+ const formRef = useRef<HTMLFormElement>(null);
+ // @ts-ignore
+ const submitContact = async (e) => {
+ e.preventDefault();
+
+ const objectParam = {
+ "entry.195424463": e.target[0].value,
+ "entry.523675412": e.target[1].value,
+ "entry.655646402": e.target[2].value,
  };
 
+ const params = new URLSearchParams();
+
+ Object.entries(objectParam).forEach(([key, value]) => {
+ params.append(key, value);
+ });
+
+ var formUrl = `https://docs.google.com/forms/d/e/1FAIpQLSfzclPs0xYECxknJnW3NVMB-ugOFhM3Zi5p76VqMptr1nLmSA/formResponse?&submit=Submit?usp=pp_url&${params.toString()}`;
+
+ try {
+ const res = await fetch(formUrl, {
+ mode: "no-cors",
+ method: "GET",
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ });
+ if (res) {
+ formRef.current?.reset();
+ toast(
+ "Thanks for contacting us! We will be in touch with you shortly!"
+ );
+ }
+ } catch (error) {
+ toast("An error occurred, please try again later!");
+ }
+ };
+
  return (
  <>
  <section className="contact-section">
@@ -76,7 +95,7 @@ export default function Contact() {
  <div className="need_content">
  <h6 className="text-white">Write to us</h6>
  <h2 className="text-white">send us a Message</h2>
- <form id="contactpage" onSubmit={submitContact}>
+ <form id="contactpage" onSubmit={submitContact} ref={formRef}>
  <div className="row">
  <div className="col-12">
  <div className="form-group mb-0">

yarn.lock

@@ -1474,6 +1474,11 @@ cliui@^8.0.1:
  strip-ansi "^6.0.1"
  wrap-ansi "^7.0.0"
 
+clsx@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+ integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3937,6 +3942,13 @@ react-is@^16.13.1, react-is@^16.7.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-toastify@^10.0.5:
+ version "10.0.5"
+ resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
+ integrity sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==
+ dependencies:
+ clsx "^2.1.0"
+
 react@18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"