splitforms.com
Get free key
VITE · CONTACT FORM

Contact form for Vite apps

Vite's fast HMR and zero-config bundling pair well with splitforms. Whether you're building vanilla, React, Vue, Svelte, or Solid on top of Vite, the same fetch-based pattern works — read your access key from `import.meta.env`, POST to splitforms.

Updated May 21, 2026 · Tested with standard HTML form submissions

Get free access key View live demo
1,000 free submissions every month.·No credit card.
contact.htmljavascript36 lines
01// .env
02// VITE_SPLITFORMS_KEY=YOUR_ACCESS_KEY
03 
04// src/contact.js
05const form = document.querySelector("#contact");
06const status = document.querySelector("#status");
07 
08form.addEventListener("submit", async (e) => {
09  e.preventDefault();
10  status.textContent = "Sending…";
11 
12  const formData = new FormData(form);
13  formData.append("access_key", import.meta.env.VITE_SPLITFORMS_KEY);
14 
15  try {
16    const res = await fetch("https://splitforms.com/api/submit", {
17      method: "POST",
18      body: formData,
19    });
20    const data = await res.json();
21    status.textContent = data.success ? "Thanks!" : "Error — try again.";
22    if (data.success) form.reset();
23  } catch {
24    status.textContent = "Network error.";
25  }
26});
27 
28// index.html
29// <form id="contact">
30//   <input name="name" required />
31//   <input name="email" type="email" required />
32//   <textarea name="message" required></textarea>
33//   <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
34//   <button type="submit">Send</button>
35// </form>
36// <p id="status"></p>
1,000
submissions / mo, free
14ms
median latency, edge
0
lines of backend code
25+
frameworks supported
§ 01Setup3 steps · 60 seconds · zero config

Ship a Vite contact form without a backend.

No SDK, no PHP, no plugin. Your form posts standard FormData to one URL — submissions land in your inbox.

STEP 01GENERATE

Get your free access key

Verify your email and your access key is generated instantly. Free for 1,000 submissions per month, forever.

Create your form

By signing up, you agree to our terms and privacy policy.

STEP 02EMBED

Drop in the Vite code

Copy the Vite snippet on the right and paste it into your project. Replace YOUR_ACCESS_KEY with the key from step 1.

snippetjavascript
// .env
…
STEP 03RECEIVE

Submissions land in your inbox

Hits your dashboard and email in seconds. Forward to Slack, Discord, Sheets, Notion, or any signed webhook URL.

inbox · 1 newjust now
FROM contact@yoursite.com
New Vite form submission
Maya Iyer maya@studio71.co
Loved the new pricing page — quick question about the 4-year plan. Are usage limits per project or account-wide?
§ 02Live demosandboxed · no key required · no submission sent

Try it now — no signup, no key.

This is a styled HTML preview of what your Vite form will look like. Submitting opens a confirmation, no real request is sent.

preview · vitelocalhost:3000
✦ what just happened

Your Vite form posts FormData to /api/submit. Splitforms validates the access key, runs the spam classifier, and forwards the parsed submission to your inbox plus the dashboard.

  • →14ms median round-trip from the edge.
  • →Honeypot + classifier, no CAPTCHA.
  • →Per-domain key locking out of the box.
REQUEST · POST /api/submit
{
  "access_key": "sk_live_4f9a_••••",
  "name":       "Maya Iyer",
  "email":      "maya@studio71.co",
  "message":    "…"
}
← 200 OK · { "success": true } · 14ms
§ 03Best practices5 rules · production-tested

How to ship this without regrets.

Five rules that make the difference between a form that works in the demo and a form that survives launch traffic.

  1. 01

    Lock the access key to your domains. The dashboard accepts a list — anyone copying the key from your bundle can't replay it from another origin.

  2. 02

    Add the hidden honeypot input. Bots fill every field; humans don't see it. Splitforms rejects any submission that has it set.

  3. 03

    Show submit state visually. Disable the button and label it 'Sending…' while the request is in flight — users hammer submit on slow networks otherwise.

  4. 04

    Use the redirect field for a thank-you page. Browsers with JavaScript disabled (or strict tracking blockers) still need a destination.

  5. 05

    Validate email server-side too. Browser type="email" only checks format; spam bots send valid-format throwaway addresses by the thousand.

§ 05Comparisonvs web3forms

splitforms vs web3forms.

What you get for free vs what you build, pay for, or do without.

FeatureWeb3Formssplitforms
Free monthly submissions250 (Web3Forms)1,000
Custom redirect URLYesYes
File uploadPro plan onlyPro plan
Webhooks (Slack / Discord)Paid tierFree, signed
AI / MCP submission inboxNoYes
§ 07Questions4 answered

Things developers ask before they integrate.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01Is splitforms really free?
Yes — 1,000 submissions per month forever, no credit card. Pro is $5/mo for 5,000 submissions and file uploads; the 4-year plan is a flat $59 (not lifetime).
02Do I need to install anything?
No. Splitforms is API-only. There's no SDK, no plugin, no PHP. Your form posts standard FormData to one URL.
03How do you handle spam?
A hidden honeypot field catches the obvious bots. A tuned classifier scores everything else and quarantines the noise. You see clean submissions only.
04Can I keep my access key out of the bundle?
Yes — use a server-side environment variable and post from a server route or server action. Or expose it client-side and rely on per-domain locking. Either path is supported.
✻ ✻ ✻

Ship your Vite contact form in 60 seconds.

1,000 free submissions per month. No credit card. Lock the access key to your domains, paste the snippet, watch submissions land in your inbox.

Get free access key →Read the docs
v0.1 · founders pricing locked in · early access open