Form Backend for HTML Forms
(No Server Required)

What is a form backend?

A form backend (also called a form endpoint or form handler service) is a hosted API that receives HTML form submissions and does something useful with them — most commonly, emails them to you.

When you build a static site, your HTML files live on a CDN. There's no server-side code to run. A form backend fills that gap. Instead of pointing your form at a PHP script you wrote, you point it at a URL the backend service gives you.

The concept is simple but powerful. It decouples your beautiful front-end form from the messy plumbing of email delivery, spam filtering, and data storage — all of which the backend service handles on its infrastructure.

How it works

From a code perspective, the only change to your form is the action attribute:

<!-- Before: points nowhere useful -->
<form action="#" method="POST">

<!-- After: points at your form backend endpoint -->
<form action="https://api.submitrax.com/f/YOUR_FORM_ID" method="POST">

Everything else stays the same: your inputs, your labels, your CSS, your JavaScript. The backend just handles what happens after "Submit" is clicked.

Features to look for in a form backend

Not all form backends are equal. Here's what matters when you're choosing one:

Must-haves

• Email notifications — every submission forwarded to your inbox, immediately.
• Spam filtering — at minimum, honeypot support. Ideally reCAPTCHA integration too.
• HTTPS endpoint — your form POST must go over TLS, full stop.
• CORS support — needed if you're using JavaScript / fetch to submit asynchronously.
• No server required on your end — the whole point is you don't manage infrastructure.

Nice-to-haves

• Submissions dashboard — view all past submissions, search, export to CSV.
• Custom redirect — send users to your own thank-you page after submitting.
• File upload support — accept attachments in form submissions.
• Auto-responder — automatically email the person who submitted the form.
• Multiple forms per account — manage contact form, newsletter form, and feedback form from one dashboard.

Implementation guide

Here's every pattern you'll need, from the simplest setup to fully async with validation.

Pattern 1: Basic (no JavaScript)

The simplest possible form. Works on any browser. Redirects to your thank-you page on success.

<form
  action="https://api.submitrax.com/f/YOUR_FORM_ID"
  method="POST"
>
  <input type="hidden" name="_redirect"
         value="https://yoursite.com/thanks">
  <input type="text"   name="name"    required>
  <input type="email"  name="email"   required>
  <textarea            name="message"></textarea>
  <button type="submit">Send</button>
</form>

Pattern 2: Async with inline success message

Use fetch to submit without navigating away, then show a confirmation in-place:

<form id="myForm">
  <input name="name" placeholder="Name" required>
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button type="submit" id="submit-btn">Send</button>
</form>
<div id="success" hidden>
  ✅ <strong>Message received!</strong> We'll reply within 24 hours.
</div>

<script>
const form = document.getElementById('myForm');
const btn  = document.getElementById('submit-btn');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  btn.disabled = true;
  btn.textContent = 'Sending…';

  try {
    const res = await fetch(
      'https://api.submitrax.com/f/YOUR_FORM_ID',
      {
        method: 'POST',
        body: new FormData(form),
        headers: { Accept: 'application/json' }
      }
    );
    if (!res.ok) throw new Error();
    form.hidden = true;
    document.getElementById('success').hidden = false;
  } catch {
    btn.textContent = 'Error — try again';
    btn.disabled = false;
  }
});
</script>

Pattern 3: With spam protection (honeypot)

A honeypot field is hidden from humans but visible to bots. If it's filled in, the submission is spam:

<form action="https://api.submitrax.com/f/YOUR_FORM_ID" method="POST">
  <!-- Real fields -->
  <input name="name"    type="text"  required>
  <input name="email"   type="email" required>
  <textarea name="message"></textarea>

  <!-- Honeypot: hidden from humans, attracts bots -->
  <input
    type="text"
    name="_gotcha"
    style="display:none;visibility:hidden;position:absolute"
    tabindex="-1"
    autocomplete="off"
  >

  <button type="submit">Send</button>
</form>

Advanced patterns

Sending to multiple recipients

Most form backends let you configure multiple notification emails from the dashboard. Some also support a hidden field to CC or BCC additional addresses per-form.

Collecting extra data silently

Use hidden fields to pass metadata — page URL, campaign source, or a form version tag — without showing it to the visitor:

<form action="https://api.submitrax.com/f/YOUR_FORM_ID" method="POST">
  <!-- Visible fields … -->
  <input name="name" required>
  <input name="email" type="email" required>

  <!-- Hidden metadata passed with every submission -->
  <input type="hidden" name="_source"  value="homepage-hero">
  <input type="hidden" name="_version" value="v2">

  <button type="submit">Send</button>
</form>

File uploads

Set enctype="multipart/form-data" on the form and add a file input. Check that your chosen backend supports file uploads (not all do):

<form
  action="https://api.submitrax.com/f/YOUR_FORM_ID"
  method="POST"
  enctype="multipart/form-data"
>
  <input name="name"  type="text"  required>
  <input name="email" type="email" required>

  <!-- File input — supported by SubmitraX -->
  <label>Attach a file
    <input name="attachment" type="file" accept=".pdf,.png,.jpg">
  </label>

  <button type="submit">Submit</button>
</form>