Form Templates / Ajax Contact Form

IntermediateHTMLJavaScriptReact

Ajax Contact Form

Submit without a page reload using the Fetch API. Shows inline success/error feedback instantly.

Create endpointView code ↓

Preview

Name
Email
Message
This form is for preview only.

Preview only. Replace the endpoint in the code with your Formtorch URL.

Code

Paste your form ID and the code below updates instantly.

index.html
<form id="contact-form">
<div>
<label for="name">Name</label>
<input id="name" type="text" name="name" required />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" name="email" required />
</div>
<div>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<button type="submit">Send message</button>
<p id="status" aria-live="polite"></p>
</form>
 
<script>
const form document.getElementById('contact-form');
const status document.getElementById('status');
 
form.addEventListener('submit', async (e) > {
e.preventDefault();
const btn form.querySelector('button[type=submit]');
btn.disabled true;
btn.textContent 'Sending...';
 
const res await fetch(
'https://formtorch.com/f/abc123',
{
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' },
body: new FormData(form),
}
);
 
if (res.ok) {
form.innerHTML '<p>Thanks! Message sent.</p>';
} else {
btn.disabled false;
btn.textContent 'Try again';
status.textContent 'Something went wrong.';
}
});
</script>

How it works

  1. 1

    Create a Formtorch endpoint

    Sign up and create a new form endpoint in the dashboard. You will get a unique URL in seconds.

    Create endpoint →
  2. 2

    Paste it into your form

    Set your form's action attribute to your endpoint URL. No other changes required.

    <form action="https://formtorch.com/f/abc123">
  3. 3

    Deploy and start receiving submissions

    Every submission is stored in your dashboard, triggers email notifications, and can fire webhooks to any service.

FAQ

No. Formtorch works with standard HTML forms via the action attribute. No JavaScript required for basic submissions.

Start collecting form submissions in minutes

Create your endpoint, paste it into any template, and you are live.

Create endpointContact us