Skip to content

HTML and Vanilla JS

This guide will show you how to set up a contact form using HTML and Vanilla JS. The advantage of using JS to submit the form is that you can keep the user on the same page and show them a success message, instead of redirecting them to a new page. This way you can also create custom form validation and integrations with other services.


<form method="POST" id="form">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="subject" value="New form submission" />
<input type="checkbox" name="botcheck" id="" style="display: none;" />
<!-- Form data -->
<input type="text" name="name" required />
<input type="email" name="email" required />
<textarea name="message"></textarea>
<button type="submit">Submit</button>
<div id="result"></div>


const form = document.getElementById('form');
const result = document.getElementById('result');
async function handleSubmit(e) {
result.innerHTML = 'Please wait...';
const formData = new FormData(form);
const json = JSON.stringify(Object.fromEntries(formData));
const res = await fetch('', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
body: json,
if (!res.ok) {
result.innerHTML = 'Something went wrong!';
const data = await res.json();
if (!data.success) {
result.innerHTML = 'Something went wrong!';
result.innerHTML = 'Thanks for contacting us!';
if (form && result) {
form.addEventListener('submit', handleSubmit);