Web3Forms
Search…
Getting Started
Multi Column Contact Form
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-100 dark:bg-gray-900">
13
<div class="container mx-auto">
14
<div class="max-w-xl mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
15
<div class="text-center">
16
<h1
17
class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200"
18
>
19
Contact Us
20
</h1>
21
<p class="text-gray-400 dark:text-gray-400">
22
Fill up the form below to send us a message.
23
</p>
24
</div>
25
<div class="m-7">
26
<form action="https://api.web3forms.com/submit" method="POST" id="form">
27
<input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE" />
28
<input
29
type="hidden"
30
name="subject"
31
value="New Submission from Web3Forms"
32
/>
33
<input type="checkbox" name="botcheck" id="" style="display: none;" />
34
​
35
<div class="flex mb-6 space-x-4">
36
<div class="w-full md:w-1/2">
37
<label
38
for="fname"
39
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
40
>First Name</label
41
>
42
<input
43
type="text"
44
name="name"
45
id="first_name"
46
placeholder="John"
47
required
48
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
49
/>
50
</div>
51
<div class="w-full md:w-1/2">
52
<label
53
for="lname"
54
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
55
>Last Name</label
56
>
57
<input
58
type="text"
59
name="last_name"
60
id="lname"
61
placeholder="Doe"
62
required
63
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
64
/>
65
</div>
66
</div>
67
​
68
<div class="flex mb-6 space-x-4">
69
<div class="w-full md:w-1/2">
70
<label
71
for="email"
72
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
73
>Email Address</label
74
>
75
<input
76
type="email"
77
name="email"
78
id="email"
79
placeholder="[email protected]"
80
required
81
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
82
/>
83
</div>
84
​
85
<div class="w-full md:w-1/2">
86
<label
87
for="phone"
88
class="block text-sm mb-2 text-gray-600 dark:text-gray-400"
89
>Phone Number</label
90
>
91
<input
92
type="text"
93
name="phone"
94
id="phone"
95
placeholder="+1 (555) 1234-567"
96
required
97
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
98
/>
99
</div>
100
</div>
101
<div class="mb-6">
102
<label
103
for="message"
104
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
105
>Your Message</label
106
>
107
​
108
<textarea
109
rows="5"
110
name="message"
111
id="message"
112
placeholder="Your Message"
113
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
114
required
115
></textarea>
116
</div>
117
<div class="mb-6">
118
<button
119
type="submit"
120
class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
121
>
122
Send Message
123
</button>
124
</div>
125
<p class="text-base text-center text-gray-400" id="result"></p>
126
</form>
127
</div>
128
</div>
129
</div>
130
</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