// This example uses `use-web3forms` plugin and tailwindcss for css styling
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import useWeb3Forms from "use-web3forms";
export default function Contact() {
formState: { errors, isSubmitSuccessful, isSubmitting },
const [isSuccess, setIsSuccess] = useState(false);
const [message, setMessage] = useState(false);
// Please update the Access Key in the .env
const apiKey = process.env.PUBLIC_ACCESS_KEY || "YOUR_ACCESS_KEY_HERE";
const { submit: onSubmit } = useWeb3Forms({
subject: "New Contact Message from your Website",
onSuccess: (msg, data) => {
onError: (msg, data) => {
<form onSubmit={handleSubmit(onSubmit)} className="my-10">
style={{ display: "none" }}
{...register("botcheck")}></input>
className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900 focus:ring-4 ${
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
required: "Full name is required",
<div className="mt-1 text-red-600">
<small>{errors.name.message}</small>
<label htmlFor="email_address" className="sr-only">
placeholder="Email Address"
className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900 focus:ring-4 ${
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
required: "Enter your email",
message: "Please enter a valid email",
<div className="mt-1 text-red-600">
<small>{errors.email.message}</small>
placeholder="Your Message"
className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white dark:placeholder:text-gray-200 dark:bg-gray-900 rounded-md outline-none h-36 focus:ring-4 ${
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
{...register("message", {
required: "Enter your Message",
<div className="mt-1 text-red-600">
<small>{errors.message.message}</small>
className="w-full py-4 font-semibold text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-offset-2 focus:ring focus:ring-gray-200 px-7 dark:bg-white dark:text-black ">
className="w-5 h-5 mx-auto text-white dark:text-black animate-spin"
xmlns="http://www.w3.org/2000/svg"
strokeWidth="4"></circle>
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
{isSubmitSuccessful && isSuccess && (
<div className="mt-3 text-sm text-center text-green-500">
{message || "Success. Message sent successfully"}
{isSubmitSuccessful && !isSuccess && (
<div className="mt-3 text-sm text-center text-red-500">
{message || "Something went wrong. Please try later."}