HTML contact form that emails you (copy-paste, no backend)

Q: How do I stop spam?

Keep the hidden _gotcha field: bots fill it, people don’t, and those submissions are dropped silently. Also set an hourly limit on the project.

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.

3Paste the form

html

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

  <input type="hidden" name="_subject" value="New contact form message">
  <input type="hidden" name="_next" value="/thanks.html">
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

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

<style>
  .contact { display: grid; gap: 14px; max-width: 480px; font: 16px/1.5 system-ui, sans-serif; }
  .contact label { display: grid; gap: 6px; font-weight: 600; }
  .contact input, .contact textarea { font: inherit; padding: 10px 12px; border: 1px solid #d6d3cc; border-radius: 10px; }
  .contact button { font: inherit; font-weight: 600; padding: 12px 16px; border: 0; border-radius: 10px; background: #141413; color: #fff; cursor: pointer; }
</style>

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

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

4Add a thank-you page

Create thanks.html next to your page. After a successful submit, visitors land there. Without _next, FormSMTP shows a simple thank-you page with a link back.

html

<!doctype html>
<title>Thanks!</title>
<h1>Thanks, your message is on its way.</h1>
<p><a href="/">Back to the site</a></p>

Any fields you like

Add a phone number, a budget dropdown or checkboxes. Every named field appears in the email, in order. Fields starting with an underscore are settings, not content; see the form reference.

FAQ

How do I stop spam?

Keep the hidden _gotcha field: bots fill it, people don’t, and those submissions are dropped silently. Also set an hourly limit on the project.

Is it safe to put the API key in my HTML?

Yes, with the project locked down. Form submissions always go to your own inbox, and you can restrict the key to your website and an hourly limit, so a copied key can’t be used to email anyone else.

Why did my message land in spam?

Usually the From address and the SMTP account don’t match, or the domain has no SPF/DKIM records. Send from the address you log in with, and check the Deliverability panel in FormSMTP’s Settings.