Templates / Astro

Astro contact form

Content sites on Astro that need reliable lead capture.

Live preview

Preview only — does not submit. Copy the code block below for the real snippet.

Copy-paste code

src/pages/contact.astro
---
const title = "Contact";
---
<html lang="en">
  <head><meta charset="utf-8" /><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
    <form action="https://formheron.com/f/YOUR_KEY" method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required></textarea>
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

What to change

  • Replace YOUR_KEY.
  • Move markup into a component if reused.
  • Style with your preferred CSS approach.

Related templates