Wire a Vite contact form to email with one env variable
A contact form in a Vite project needs a VITE_ prefixed environment variable for the access key and a fetch call to FormThunder. You don't need a dev server proxy, because CORS is open on the submit URL and the same code runs in npm run dev and in the production build. This example is vanilla TypeScript, and the same approach works in any Vite template.
Updated
The Vite code
VITE_FORMTHUNDER_KEY=YOUR_ACCESS_KEYconst form = document.querySelector<HTMLFormElement>("#contact")!;
const result = document.querySelector<HTMLParagraphElement>("#result")!;
form.addEventListener("submit", async (event) => {
event.preventDefault();
const fields = Object.fromEntries(new FormData(form));
const response = await fetch("https://formthunder.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ ...fields, access_key: import.meta.env.VITE_FORMTHUNDER_KEY }),
});
const data = await response.json();
result.textContent = data.message;
if (data.success) form.reset();
});/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_FORMTHUNDER_KEY: string;
}Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Vite
- Vite only exposes variables that start with
VITE_, and it replaces them at build time. Change one and you must rebuild. - It's fine to commit
.envhere since the key is public. Use.env.localif your team's policy is to keep all env files out of git. - Test submissions from
npm run devcount against your monthly limit like any others. Pro's domain restriction would block them unlesslocalhostis on the list.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Vite site that emails hello@example.com. Send a test when you're done.Questions
Do I need a Vite proxy for this?
No. Proxies get around CORS, and /submit already allows every origin.
Why is my key undefined?
The variable probably lacks the VITE_ prefix, or the dev server was running when you added it. Restart it after editing .env.
Get your Vite form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.