Web3Forms
Search…
Basic HTML 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-50 dark:bg-gray-900">
13
<div class="container mx-auto">
14
<div class="max-w-md 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
34
type="hidden"
35
name="redirect"
36
value="https://web3forms.com/success"
37
/>
38
<input type="checkbox" name="botcheck" id="" style="display: none;" />
39
<div class="mb-6">
40
<label
41
for="name"
42
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
43
>Full Name</label
44
>
45
<input
46
type="text"
47
name="name"
48
id="name"
49
placeholder="John Doe"
50
required
51
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"
52
/>
53
</div>
54
<div class="mb-6">
55
<label
56
for="email"
57
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
58
>Email Address</label
59
>
60
<input
61
type="email"
62
name="email"
63
id="email"
64
placeholder="[email protected]"
65
required
66
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"
67
/>
68
</div>
69
<div class="mb-6">
70
<label for="phone" class="text-sm text-gray-600 dark:text-gray-400"
71
>Phone Number</label
72
>
73
<input
74
type="text"
75
name="phone"
76
id="phone"
77
placeholder="+1 (555) 1234-567"
78
required
79
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"
80
/>
81
</div>
82
<div class="mb-6">
83
<label
84
for="message"
85
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
86
>Your Message</label
87
>
88
89
<textarea
90
rows="5"
91
name="message"
92
id="message"
93
placeholder="Your Message"
94
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"
95
required
96
></textarea>
97
</div>
98
<div class="mb-6">
99
<button
100
type="submit"
101
class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
102
>
103
Send Message
104
</button>
105
</div>
106
<p class="text-base text-center text-gray-400" id="result"></p>
107
</form>
108
</div>
109
</div>
110
</div>
111
</div>
Copied!
Last modified 8mo ago
Copy link
Contents
HTML