How to Send a Form to Email
(No Backend Required)

Why you can't just email form data with plain HTML

HTML forms are designed to send data somewhere — but that "somewhere" needs a server-side script (PHP, Node.js, Python…) to receive the POST request and forward it to your email. If you're building a static site, you don't have that luxury.

So what's the right way? You have three real options, and we'll walk through all of them.

3 approaches compared

Approach 1: mailto: link (quick & dirty)

Worth knowing so you can confidently skip it. The HTML is simple:

<!-- ⚠️ Not recommended for production forms -->
<form action="mailto:you@email.com" method="POST" enctype="text/plain">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

The result? The browser tries to open the visitor's desktop mail client with a URL-encoded body. It fails silently for most users and looks terrible when it works. Use this only for a plain "email me" link — never for a real contact form.

Approach 2: Form backend service (recommended)

A form backend service is a hosted endpoint that accepts your form's POST request and delivers the data to your email. You point your HTML at their URL — they handle everything else. This is the right answer for nearly every static site.

How it works in 3 steps

1. Create an endpoint

   Sign up for a form backend service and create a new form. You get a unique URL like https://api.submitrax.com/f/abc123.

2. Point your form's action at that URL

   Change your form's action attribute to the endpoint. Set method="POST". Add your fields with name attributes.

3. Every submission arrives in your inbox

   The service emails you the form data nicely formatted. You can also view submissions in a dashboard, export to CSV, and more.

Basic working example

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

  <!-- Optional: redirect to a thank-you page after submit -->
  <input type="hidden" name="_redirect"
         value="https://yoursite.com/thanks">

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

AJAX version — show a success message without a page reload

Want to display "Thanks!" in place without redirecting? Use fetch with Accept: application/json:

<form id="contact">
  <input name="name"    placeholder="Name"    required>
  <input name="email"   type="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>
<p id="thanks" hidden>✅ Message sent — we'll be in touch!</p>

<script>
document.getElementById('contact').addEventListener('submit', async e => {
  e.preventDefault();
  await fetch('https://api.submitrax.com/f/YOUR_FORM_ID', {
    method: 'POST',
    body: new FormData(e.target),
    headers: { Accept: 'application/json' }
  });
  e.target.hidden = true;
  document.getElementById('thanks').hidden = false;
});
</script>

Approach 3: Self-hosted (advanced)

If you already have server hosting and want complete control, you can write a small email handler. Here's the minimal PHP version:

<?php
// contact.php — minimal example. Add CSRF, rate limiting,
// and SMTP (not mail()) before shipping to production.
if ($_SERVER['REQUEST_METHOD'] !== 'POST') exit;

$name    = htmlspecialchars($_POST['name'] ?? '');
$email   = filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars($_POST['message'] ?? '');

mail(
  'you@yoursite.com',
  "Contact from {$name}",
  "From: {$name} <{$email}>\n\n{$message}",
  'From: noreply@yoursite.com'
);
header('Location: /thanks.html'); exit;

Full working example

Here's a complete contact form built with SubmitraX. Fill it in — it actually works:

<form action="https://api.submitrax.com/f/YOUR_ID" method="POST">
  <input type="text"  name="name"    required>
  <input type="email" name="email"   required>
  <textarea            name="message"></textarea>
  <button type="submit">Send</button>
</form>
<!-- That's literally it. -->