128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import emailjs from "@emailjs/browser";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const ContactForm = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const notify = () => {
|
|
toast.success(t("contact.toasts.success"));
|
|
};
|
|
|
|
const errorToast = () => {
|
|
toast.error(t("contact.toasts.error"));
|
|
};
|
|
|
|
const emptyForm = () => {
|
|
toast.warning(t("contact.toasts.empty"));
|
|
};
|
|
|
|
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
let isEmpty = Array.from(e.currentTarget.elements).some(
|
|
(input) =>
|
|
(input as HTMLInputElement).type !== "submit" &&
|
|
(input as HTMLInputElement).value.trim() === ""
|
|
);
|
|
|
|
if (isEmpty) {
|
|
emptyForm();
|
|
return;
|
|
}
|
|
|
|
emailjs
|
|
.sendForm("service_o7kxotj", "template_f30zlog", e.currentTarget, {
|
|
publicKey: "vcSOwPedqkRH3nmr9",
|
|
})
|
|
.then(
|
|
(result) => {
|
|
console.log(result.text);
|
|
notify();
|
|
},
|
|
(error) => {
|
|
console.log(error.text);
|
|
errorToast();
|
|
}
|
|
);
|
|
|
|
e.currentTarget.reset();
|
|
};
|
|
|
|
return (
|
|
<div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
|
|
<form onSubmit={sendEmail} className="w-full md:w-auto">
|
|
<div className="flex flex-col md:flex-row md:gap-3">
|
|
<input
|
|
className="form-input"
|
|
type="text"
|
|
name="user_name"
|
|
placeholder={t("contact.form.name")}
|
|
/>
|
|
<input
|
|
className="form-input"
|
|
type="email"
|
|
name="user_email"
|
|
placeholder={t("contact.form.email")}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row md:gap-3">
|
|
<input
|
|
className="form-input"
|
|
type="text"
|
|
name="user_company"
|
|
placeholder={t("contact.form.company")}
|
|
/>
|
|
<input
|
|
className="form-input"
|
|
type="number"
|
|
name="user_phone"
|
|
placeholder={t("contact.form.phone")}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<input
|
|
className="form-input"
|
|
type="text"
|
|
name="user_question"
|
|
placeholder={t("contact.form.question")}
|
|
></input>
|
|
|
|
<textarea
|
|
className="form-input"
|
|
name="message"
|
|
placeholder={t("contact.form.message")}
|
|
rows={6}
|
|
></textarea>
|
|
</div>
|
|
|
|
<div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
|
|
<button
|
|
type="submit"
|
|
className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
|
|
>
|
|
{t("contact.form.button")}
|
|
</button>
|
|
</div>
|
|
|
|
<ToastContainer
|
|
position="top-center"
|
|
autoClose={5000}
|
|
hideProgressBar
|
|
newestOnTop={false}
|
|
closeOnClick
|
|
rtl={false}
|
|
pauseOnFocusLoss
|
|
draggable
|
|
pauseOnHover
|
|
theme="dark"
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm;
|