How to send email from a static website (no backend)

Your options

How it works

Your form posts to a FormSMTP URL. FormSMTP checks the request (allowed site, rate limit, spam honeypot), then hands the message to your SMTP server, the same one your mail app uses. The email arrives from your own address, with the visitor as reply-to.

1Create a FormSMTP project

Sign up free and add a project. Pick your email provider so the SMTP host and port fill in, enter your login, and click Test connection. Not sure which provider? Your existing mailbox works: see the Gmail or Zoho guides.

2Lock the project to your site

In Settings → Security, set Allowed websites to https://yoursite.com and Allowed recipients to your own address. Now the key in your page can only email you, only from your site, and only up to your hourly limit.

3Add the form

Paste this anywhere in your HTML and replace YOUR_API_KEY with the key from API & code:

<form action="https://app.formsmtp.com/api/v1/form/YOUR_API_KEY" method="POST">
  <label>Name <input name="name" required></label>
  <label>Email <input name="email" type="email" required></label>
  <label>Message <textarea name="message" rows="5" required></textarea></label>

  <input type="hidden" name="_subject" value="New message from my website">
  <!-- Honeypot: hidden from people, irresistible to bots -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

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

Submit it once. The message lands in your inbox and shows up under Logs.

4Optional: send without leaving the page

Prefer an inline “Thanks!” message? Submit with fetch() and ask for JSON:

<script>
  const form = document.querySelector("form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const res = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new URLSearchParams(new FormData(form)),
    });
    const data = await res.json();
    form.innerHTML = data.success ? "<p>Thanks! We'll be in touch.</p>" : "<p>Sorry: " + data.error + "</p>";
  });
</script>

Framework guides

• HTML contact form that emails you
• GitHub Pages contact form
• Next.js contact form
• Astro contact form
• React contact form
• Use Gmail SMTP for a website form
• Use Zoho Mail SMTP for a website form
• Newsletter signup form for static sites

FAQ

More guides

• HTML contact form that emails you
• GitHub Pages contact form
• Next.js contact form
• Astro contact form