contact-us turnstile
This commit is contained in:
Dex404
parent
6833f213d1
commit
2bbda36300
3 changed files with 100 additions and 77 deletions
3
.env
3
.env
|
|
@ -1 +1,2 @@
|
|||
NEXT_PUBLIC_ZOHO_PASS=bw8gDdMm5P7i
|
||||
NEXT_PUBLIC_ZOHO_PASS=bw8gDdMm5P7i
|
||||
NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAYF95fpqit1gynJ
|
||||
|
|
|
|||
|
|
@ -20,12 +20,13 @@ export async function POST(req: any) {
|
|||
const plainTextContent = stripHTMLTags(htmlContent)
|
||||
|
||||
try {
|
||||
await transporter.sendMail({
|
||||
...mailOptions,
|
||||
subject: `Contact Inquiry - VizoleLabs Web`,
|
||||
text: plainTextContent,
|
||||
html: htmlContent,
|
||||
})
|
||||
console.log(req.headers)
|
||||
// await transporter.sendMail({
|
||||
// ...mailOptions,
|
||||
// subject: `Contact Inquiry - VizoleLabs Web`,
|
||||
// text: plainTextContent,
|
||||
// html: htmlContent,
|
||||
// })
|
||||
return NextResponse.json({ success: true })
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { Button } from "components/Button/Button"
|
|||
import { useState } from "react"
|
||||
import MoveUpWhenVisible from "utils/ScrollAnimations/MoveUpOnScroll"
|
||||
import { toast, Toaster } from "sonner"
|
||||
import Script from "next/script"
|
||||
import { copyFile } from "fs"
|
||||
|
||||
interface ResponseData {
|
||||
success: boolean
|
||||
|
|
@ -15,6 +17,7 @@ export default function ContactUs() {
|
|||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
token: "",
|
||||
})
|
||||
|
||||
const [submiting, setSubmiting] = useState(false)
|
||||
|
|
@ -31,15 +34,25 @@ export default function ContactUs() {
|
|||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
setSubmiting(true)
|
||||
|
||||
const submitdata = new FormData(e.currentTarget)
|
||||
const token = submitdata.get("cf-turnstile-response")
|
||||
if (!token) {
|
||||
toast.error("Please complete the captcha")
|
||||
setSubmiting(false)
|
||||
return
|
||||
}
|
||||
setFormData({
|
||||
...formData,
|
||||
token: token as string,
|
||||
})
|
||||
function clearForm() {
|
||||
setFormData({
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
token: "",
|
||||
})
|
||||
}
|
||||
|
||||
const response = await fetch("/api/routes", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -63,75 +76,83 @@ export default function ContactUs() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
|
||||
<MoveUpWhenVisible>
|
||||
<h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
|
||||
Contact Us
|
||||
</h2>
|
||||
</MoveUpWhenVisible>
|
||||
<MoveUpWhenVisible>
|
||||
<p className="mb-8 text-center font-light text-slate-200 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let
|
||||
us know.
|
||||
</p>
|
||||
</MoveUpWhenVisible>
|
||||
<MoveUpWhenVisible>
|
||||
<form action="#" className="space-y-8" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
|
||||
Your email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
onChange={handleInputChange}
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="name@gmail.com"
|
||||
required
|
||||
<div>
|
||||
<Script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
|
||||
defer={true}
|
||||
async={true}
|
||||
></Script>
|
||||
<div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
|
||||
<MoveUpWhenVisible>
|
||||
<h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
|
||||
Contact Us
|
||||
</h2>
|
||||
</MoveUpWhenVisible>
|
||||
<MoveUpWhenVisible>
|
||||
<p className="mb-8 text-center font-light text-slate-200 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let
|
||||
us know.
|
||||
</p>
|
||||
</MoveUpWhenVisible>
|
||||
<MoveUpWhenVisible>
|
||||
<form action="#" className="space-y-8" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
|
||||
Your email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
onChange={handleInputChange}
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="name@gmail.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="subject" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
|
||||
Subject
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={handleInputChange}
|
||||
name="subject"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="Let us know how we can help you"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="message" className="mb-2 block text-sm font-medium text-white dark:text-gray-400">
|
||||
Your message
|
||||
</label>
|
||||
<textarea
|
||||
onChange={handleInputChange}
|
||||
name="message"
|
||||
rows={6}
|
||||
className="block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="Leave a comment..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="cf-turnstile" data-sitekey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY}></div>
|
||||
<Toaster
|
||||
position="top-right"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "bg-vizoleG2",
|
||||
title: "text-white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="subject" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
|
||||
Subject
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={handleInputChange}
|
||||
name="subject"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="Let us know how we can help you"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="message" className="mb-2 block text-sm font-medium text-white dark:text-gray-400">
|
||||
Your message
|
||||
</label>
|
||||
<textarea
|
||||
onChange={handleInputChange}
|
||||
name="message"
|
||||
rows={6}
|
||||
className="block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder="Leave a comment..."
|
||||
></textarea>
|
||||
</div>
|
||||
<Toaster
|
||||
position="top-right"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "bg-vizoleG2",
|
||||
title: "text-white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
Send message
|
||||
</button>
|
||||
</form>
|
||||
</MoveUpWhenVisible>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
Send message
|
||||
</button>
|
||||
</form>
|
||||
</MoveUpWhenVisible>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue