How to Send HTML Form Data to Email Without a Server

The short answer

You can't send email directly from HTML — the browser has no SMTP. But you can have the browser POST the form to a hosted service that does have SMTP, and let that service deliver the email for you. Your website remains static; no server runs on your side.

The setup is one HTML snippet. Replace YOUR_ACCESS_KEY with your real key from splitforms.com/login:

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="redirect" value="https://yoursite.com/thanks" />

  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>

  <!-- Honeypot — invisible to humans, filled by bots -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />

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

Paste it into Webflow, WordPress, Next.js, Astro, Carrd, GitHub Pages, Cloudflare Pages, anywhere static HTML lives. The visitor submits, the email arrives in 2–5 seconds.

Step-by-step: zero to working form

1. Sign up. Go to splitforms.com/login, enter your email, paste the 6-digit code from your inbox.
2. Copy the access key. Your dashboard shows a long string like 4f3a2c1b.... That's your authentication.
3. Paste the snippet above on your site, replacing YOUR_ACCESS_KEY.
4. Submit a test. Open the page, fill in the form, click Send. Within 5 seconds your inbox has the message.

That's the whole flow. No webhooks to configure, no SMTP servers to point at, no environment variables to set.

Why can't HTML send email on its own?

HTML describes a structure for the browser to render. It has no networking primitives beyond "load this URL," and it certainly cannot open a connection to a mail server. Even if it could, browsers block outbound SMTP for security — otherwise any web page could send spam from your machine.

So somewhere in the chain, there has to be a server that talks SMTP. Your options:

• Run your own server — days of work, ongoing SMTP/DKIM/DMARC maintenance.
• Use a serverless function (Vercel, Cloudflare Workers) plus a transactional email API (Resend, SendGrid) — hours of work, plus you have to handle spam, storage, retries.
• Use a form backend — minutes of work, bundled with spam filtering and a dashboard.

For a contact form, the third option wins on every axis except "I want full control."

What if my site is a JavaScript SPA (React, Vue, Svelte)?

Same idea, slightly different syntax — you call fetch() instead of letting the browser submit:

async function onSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  formData.append("access_key", "YOUR_ACCESS_KEY");
  const res = await fetch("https://splitforms.com/api/submit", {
    method: "POST",
    body: formData,
  });
  const data = await res.json();
  if (data.success) showSuccessMessage();
}

Full framework guides:

• Next.js contact form
• React contact form
• Vue / Nuxt contact form
• Astro contact form
• Webflow contact form
• WordPress contact form (no plugin)

How to stop spam without a captcha

The honeypot field in the snippet above catches about 90% of bot submissions on its own. Bots fill every input they see; humans don't see display:none inputs. Splitforms drops any submission with a non-empty botcheck automatically.

For the remaining 10%, layer on Cloudflare Turnstile or hCaptcha (both free) — see honeypot vs reCAPTCHA and how to stop contact form spam.

What about mailto: links?

A mailto:link tells the browser to open the visitor's configured email client and pre-fill a message. The problem: most visitors don't have a desktop email client installed. Clicking the link does nothing visible on Chrome with no default mail handler. Conversion rate is roughly zero — measured at near 1% in field tests vs ~25% for a real form.

If you only ever expect technical visitors who use Outlook or Apple Mail, mailto: can be a fallback. For everyone else, a form backend converts twenty to fifty times better.

What about file uploads?

File uploads work the same way: add enctype="multipart/form-data" to the form and an <input type="file">. Splitforms supports file uploads up to 10MB per submission on the Pro plan. See how to add file uploads to a contact form.

FAQ

Next steps

• Sign up free — 1,000 submissions/month, no credit card.
• Or read What Is a Form Backend? for the bigger-picture context.
• Or skip ahead to the 60-second setup guide.
• Compare alternatives: top form-to-email services.