Web3Forms
Search…
Getting Started
Contact Form with Dark Mode
HTML
1
<!--
2
=======================================================================
3
​
4
This is a working contact form. To receive email,
5
Replace YOUR_ACCESS_KEY_HERE with your actual Access Key.
6
​
7
Create Access Key here 👉 https://web3forms.com/
8
​
9
=======================================================================
10
-->
11
​
12
<div class="flex items-center min-h-screen bg-gray-900">
13
<div class="container mx-auto">
14
<div class="max-w-md mx-auto my-10 bg-gray-800 p-5 rounded-md shadow-sm">
15
<div class="text-center">
16
<h1 class="my-3 text-3xl font-semibold text-gray-100">Contact Us</h1>
17
<p class="text-gray-400 dark:text-gray-400">
18
Fill up the form below to send us a message.
19
</p>
20
</div>
21
<div class="m-7">
22
<form action="https://api.web3forms.com/submit" method="POST" id="form">
23
<input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE" />
24
<input
25
type="hidden"
26
name="subject"
27
value="New Submission from Web3Forms"
28
/>
29
<input type="checkbox" name="botcheck" id="" style="display: none;" />
30
​
31
<div class="mb-6">
32
<label for="name" class="block mb-2 text-sm text-gray-400"
33
>Full Name</label
34
>
35
<input
36
type="text"
37
name="name"
38
id="name"
39
placeholder="John Doe"
40
required
41
class="w-full px-3 py-2 h-12 rounded-sm placeholder-gray-500 text-gray-900 bg-gray-100 text-sm focus:outline-none"
42
/>
43
</div>
44
<div class="mb-6">
45
<label for="email" class="block mb-2 text-sm text-gray-400"
46
>Email Address</label
47
>
48
<input
49
type="email"
50
name="email"
51
id="email"
52
placeholder="[email protected]"
53
required
54
class="w-full px-3 py-2 h-12 rounded-sm placeholder-gray-500 text-gray-900 bg-gray-100 text-sm focus:outline-none"
55
/>
56
</div>
57
<div class="mb-6">
58
<label for="phone" class="block mb-2 text-sm text-gray-400"
59
>Phone Number</label
60
>
61
<input
62
type="text"
63
name="phone"
64
id="phone"
65
placeholder="+1 (555) 1234-567"
66
required
67
class="w-full px-3 py-2 h-12 rounded-sm placeholder-gray-500 text-gray-900 bg-gray-100 text-sm focus:outline-none"
68
/>
69
</div>
70
<div class="mb-6">
71
<label for="message" class="block mb-2 text-sm text-gray-400"
72
>Your Message</label
73
>
74
​
75
<textarea
76
rows="5"
77
name="message"
78
id="message"
79
placeholder="Your Message"
80
class="w-full px-3 py-2 rounded-sm placeholder-gray-500 text-gray-900 bg-gray-100 text-sm focus:outline-none"
81
required
82
></textarea>
83
</div>
84
<div class="mb-6">
85
<button
86
type="submit"
87
class="w-full bg-indigo-600 inline-block text-white no-underline hover:text-indigo-100 py-4 px-4 rounded-sm focus:outline-none"
88
>
89
Send Message
90
</button>
91
</div>
92
<p class="text-base text-center text-gray-400" id="result"></p>
93
</form>
94
</div>
95
</div>
96
</div>
97
</div>
Copied!
Javascript
1
const form = document.getElementById("form");
2
const result = document.getElementById("result");
3
​
4
form.addEventListener("submit", function (e) {
5
const formData = new FormData(form);
6
e.preventDefault();
7
var object = {};
8
formData.forEach((value, key) => {
9
object[key] = value;
10
});
11
var json = JSON.stringify(object);
12
result.innerHTML = "Please wait...";
13
​
14
fetch("https://api.web3forms.com/submit", {
15
method: "POST",
16
headers: {
17
"Content-Type": "application/json",
18
Accept: "application/json",
19
},
20
body: json,
21
})
22
.then(async (response) => {
23
let json = await response.json();
24
if (response.status == 200) {
25
result.innerHTML = json.message;
26
result.classList.remove("text-gray-500");
27
result.classList.add("text-green-500");
28
} else {
29
console.log(response);
30
result.innerHTML = json.message;
31
result.classList.remove("text-gray-500");
32
result.classList.add("text-red-500");
33
}
34
})
35
.catch((error) => {
36
console.log(error);
37
result.innerHTML = "Something went wrong!";
38
})
39
.then(function () {
40
form.reset();
41
setTimeout(() => {
42
result.style.display = "none";
43
}, 5000);
44
});
45
});
Copied!
Last modified 8mo ago
Copy link