Astro contact form that sends email
Astro ships plain HTML by default, which is exactly what a FormSMTP form needs. No adapter, no API route.
Last updated October 25, 2026
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.
3Create the component
---
// src/components/ContactForm.astro
const key = import.meta.env.PUBLIC_FORMSMTP_KEY;
---
<form id="contact" action={`https://app.formsmtp.com/api/v1/form/${key}`} method="POST">
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
<button>Send</button>
<p id="contact-status" role="status"></p>
</form>
<script>
// Progressive enhancement: works without JS, nicer with it.
const form = document.getElementById("contact") as HTMLFormElement;
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) as any),
});
const data = await res.json();
document.getElementById("contact-status")!.textContent = data.success ? "Thanks! Message sent." : data.error;
if (data.success) form.reset();
});
</script>Add PUBLIC_FORMSMTP_KEY=… to .env, then use <ContactForm /> on any page.
FAQ
Do I need an Astro adapter or SSR?
No. The form posts directly to FormSMTP, so a fully static Astro build works.
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.