Web3Forms
Search…
React Plugin
Our community has created a react plugin to send form submissions easily using Web3Forms.
​use-web3forms is a react hook that is available to download from npm and the source on github. This plugin is made & maintained by Lalit.
The following example shows how you can create a working contact form using this react hook.
contact.js
1
// This example uses `use-web3forms` plugin and tailwindcss for css styling
2
​
3
import { useState, useEffect } from "react";
4
import { useForm } from "react-hook-form";
5
import useWeb3Forms from "use-web3forms";
6
​
7
export default function Contact() {
8
const {
9
register,
10
handleSubmit,
11
reset,
12
watch,
13
control,
14
setValue,
15
formState: { errors, isSubmitSuccessful, isSubmitting },
16
} = useForm({
17
mode: "onTouched",
18
});
19
const [isSuccess, setIsSuccess] = useState(false);
20
const [message, setMessage] = useState(false);
21
​
22
// Please update the Access Key in the .env
23
const apiKey = process.env.PUBLIC_ACCESS_KEY || "YOUR_ACCESS_KEY_HERE";
24
​
25
const { submit: onSubmit } = useWeb3Forms({
26
apikey: apiKey,
27
from_name: "Acme Inc",
28
subject: "New Contact Message from your Website",
29
onSuccess: (msg, data) => {
30
setIsSuccess(true);
31
setMessage(msg);
32
reset();
33
},
34
onError: (msg, data) => {
35
setIsSuccess(false);
36
setMessage(msg);
37
},
38
});
39
​
40
return (
41
<>
42
<form onSubmit={handleSubmit(onSubmit)} className="my-10">
43
<input
44
type="checkbox"
45
id=""
46
className="hidden"
47
style={{ display: "none" }}
48
{...register("botcheck")}></input>
49
​
50
<div className="mb-5">
51
<input
52
type="text"
53
placeholder="Full Name"
54
autoComplete="false"
55
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 ${
56
errors.name
57
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
58
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
59
}`}
60
{...register("name", {
61
required: "Full name is required",
62
maxLength: 80,
63
})}
64
/>
65
{errors.name && (
66
<div className="mt-1 text-red-600">
67
<small>{errors.name.message}</small>
68
</div>
69
)}
70
</div>
71
​
72
<div className="mb-5">
73
<label htmlFor="email_address" className="sr-only">
74
Email Address
75
</label>
76
<input
77
id="email_address"
78
type="email"
79
placeholder="Email Address"
80
name="email"
81
autoComplete="false"
82
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 ${
83
errors.email
84
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
85
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
86
}`}
87
{...register("email", {
88
required: "Enter your email",
89
pattern: {
90
value: /^\[email protected]\S+$/i,
91
message: "Please enter a valid email",
92
},
93
})}
94
/>
95
{errors.email && (
96
<div className="mt-1 text-red-600">
97
<small>{errors.email.message}</small>
98
</div>
99
)}
100
</div>
101
​
102
<div className="mb-3">
103
<textarea
104
name="message"
105
placeholder="Your Message"
106
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 ${
107
errors.message
108
? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
109
: "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
110
}`}
111
{...register("message", {
112
required: "Enter your Message",
113
})}
114
/>
115
{errors.message && (
116
<div className="mt-1 text-red-600">
117
{" "}
118
<small>{errors.message.message}</small>
119
</div>
120
)}
121
</div>
122
​
123
<button
124
type="submit"
125
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 ">
126
{isSubmitting ? (
127
<svg
128
className="w-5 h-5 mx-auto text-white dark:text-black animate-spin"
129
xmlns="http://www.w3.org/2000/svg"
130
fill="none"
131
viewBox="0 0 24 24">
132
<circle
133
className="opacity-25"
134
cx="12"
135
cy="12"
136
r="10"
137
stroke="currentColor"
138
strokeWidth="4"></circle>
139
<path
140
className="opacity-75"
141
fill="currentColor"
142
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>
143
</svg>
144
) : (
145
"Send Message"
146
)}
147
</button>
148
</form>
149
​
150
{isSubmitSuccessful && isSuccess && (
151
<div className="mt-3 text-sm text-center text-green-500">
152
{message || "Success. Message sent successfully"}
153
</div>
154
)}
155
{isSubmitSuccessful && !isSuccess && (
156
<div className="mt-3 text-sm text-center text-red-500">
157
{message || "Something went wrong. Please try later."}
158
</div>
159
)}
160
</>
161
);
162
}
163
​
Copied!
Last modified 30d ago
Copy link