Web3Forms
Search…
Javascript Form Validation

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
27
action="https://api.web3forms.com/submit"
28
method="POST"
29
id="form"
30
class="needs-validation"
31
novalidate
32
>
33
<input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE" />
34
<input
35
type="hidden"
36
name="subject"
37
value="New Submission from Web3Forms"
38
/>
39
<input type="checkbox" name="botcheck" id="" style="display: none;" />
40
41
<div class="flex mb-6 space-x-4">
42
<div class="w-full md:w-1/2">
43
<label
44
for="fname"
45
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
46
>First Name</label
47
>
48
<input
49
type="text"
50
name="name"
51
id="first_name"
52
placeholder="John"
53
required
54
class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
55
/>
56
<div
57
class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"
58
>
59
Please provide your first name.
60
</div>
61
</div>
62
<div class="w-full md:w-1/2">
63
<label
64
for="lname"
65
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
66
>Last Name</label
67
>
68
<input
69
type="text"
70
name="last_name"
71
id="lname"
72
placeholder="Doe"
73
required
74
class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
75
/>
76
<div
77
class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"
78
>
79
Please provide your last name.
80
</div>
81
</div>
82
</div>
83
84
<div class="flex mb-6 space-x-4">
85
<div class="w-full md:w-1/2">
86
<label
87
for="email"
88
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
89
>Email Address</label
90
>
91
<input
92
type="email"
93
name="email"
94
id="email"
95
placeholder="[email protected]"
96
required
97
class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
98
/>
99
<div class="empty-feedback text-red-400 text-sm mt-1">
100
Please provide your email address.
101
</div>
102
<div class="invalid-feedback text-red-400 text-sm mt-1">
103
Please provide a valid email address.
104
</div>
105
</div>
106
107
<div class="w-full md:w-1/2">
108
<label
109
for="phone"
110
class="block text-sm mb-2 text-gray-600 dark:text-gray-400"
111
>Phone Number</label
112
>
113
<input
114
type="text"
115
name="phone"
116
id="phone"
117
placeholder="+1 (555) 1234-567"
118
required
119
class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
120
/>
121
122
<div
123
class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"
124
>
125
Please provide your phone number.
126
</div>
127
</div>
128
</div>
129
<div class="mb-6">
130
<label
131
for="message"
132
class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
133
>Your Message</label
134
>
135
136
<textarea
137
rows="5"
138
name="message"
139
id="message"
140
placeholder="Your Message"
141
class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
142
required
143
></textarea>
144
<div
145
class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"
146
>
147
Please enter your message.
148
</div>
149
</div>
150
<div class="mb-6">
151
<button
152
type="submit"
153
class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
154
>
155
Send Message
156
</button>
157
</div>
158
<p class="text-base text-center text-gray-400" id="result"></p>
159
</form>
160
</div>
161
</div>
162
</div>
163
</div>
Copied!

CSS

1
.invalid-feedback,
2
.empty-feedback {
3
display: none;
4
}
5
6
.was-validated :placeholder-shown:invalid ~ .empty-feedback {
7
display: block;
8
}
9
10
.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback {
11
display: block;
12
}
13
14
.is-invalid,
15
.was-validated :invalid {
16
border-color: #dc3545;
17
}
Copied!

Javascript

1
(function () {
2
"use strict";
3
/*
4
* Form Validation
5
*/
6
7
// Fetch all the forms we want to apply custom validation styles to
8
const forms = document.querySelectorAll(".needs-validation");
9
const result = document.getElementById("result");
10
// Loop over them and prevent submission
11
Array.prototype.slice.call(forms).forEach(function (form) {
12
form.addEventListener(
13
"submit",
14
function (event) {
15
if (!form.checkValidity()) {
16
event.preventDefault();
17
event.stopPropagation();
18
19
form.querySelectorAll(":invalid")[0].focus();
20
} else {
21
/*
22
* Form Submission using fetch()
23
*/
24
25
const formData = new FormData(form);
26
event.preventDefault();
27
event.stopPropagation();
28
const object = {};
29
formData.forEach((value, key) => {
30
object[key] = value;
31
});
32
const json = JSON.stringify(object);
33
result.innerHTML = "Please wait...";
34
35
fetch("https://api.web3forms.com/submit", {
36
method: "POST",
37
headers: {
38
"Content-Type": "application/json",
39
Accept: "application/json",
40
},
41
body: json,
42
})
43
.then(async (response) => {
44
let json = await response.json();
45
if (response.status == 200) {
46
result.innerHTML = json.message;
47
result.classList.remove("text-gray-500");
48
result.classList.add("text-green-500");
49
} else {
50
console.log(response);
51
result.innerHTML = json.message;
52
result.classList.remove("text-gray-500");
53
result.classList.add("text-red-500");
54
}
55
})
56
.catch((error) => {
57
console.log(error);
58
result.innerHTML = "Something went wrong!";
59
})
60
.then(function () {
61
form.reset();
62
form.classList.remove("was-validated");
63
setTimeout(() => {
64
result.style.display = "none";
65
}, 5000);
66
});
67
}
68
form.classList.add("was-validated");
69
},
70
false
71
);
72
});
73
})();
Copied!
Last modified 8mo ago
Copy link