Web3Forms
Search…
HTML & JavaScript
Sometimes you want to use JavaScript to submit the form and its possible with Web3Forms. If you use JavaScript, you can keep users on the same page instead of redirecting to other page. Also you will be able to code custom form validation or integration with other tools / services.
The initial steps are same as Pure HTML. Be sure to check to know how to create Access Key. Then use the following sample code to get started. Modify it according to your needs.
HTML
1
<form method="POST" id="form">
2
​
3
<input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE">
4
<input type="hidden" name="subject" value="New Submission from Web3Forms">
5
<input type="checkbox" name="botcheck" id="" style="display: none;">
6
​
7
<!-- Custom Form Data -->
8
<input type="email" name="email" required>
9
<input type="text" name="name" required>
10
<input type="text" name="phone" required>
11
<textarea name="message" required></textarea>
12
​
13
<button type="submit">Submit</button>
14
​
15
<div id="result"></div>
16
​
17
</form>
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
} else {
27
console.log(response);
28
result.innerHTML = json.message;
29
}
30
})
31
.catch(error => {
32
console.log(error);
33
result.innerHTML = "Something went wrong!";
34
})
35
.then(function() {
36
form.reset();
37
setTimeout(() => {
38
result.style.display = "none";
39
}, 3000);
40
});
41
});
Copied!
Last modified 9mo ago
Copy link