Contact form for Astro

Contact form for an Astro site

Astro sites are static by default, which is exactly what Formpit is for. No integration package, no adapter.

How to set it up

1. Create a form in Formpit and copy the endpoint URL.
2. Put the plain HTML form in any .astro page or component.
3. Build, deploy, and send a test submission.

src/pages/contact.astro

<form action="https://formpit.com/f/YOUR_FORM_ID" method="POST">
  <input type="text"  name="name"  placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>

Replace YOUR_FORM_ID with the endpoint from your form's Setup tab.

Good to know

• Add client:load only if you wrap it in a framework component with fetch(); the plain form needs no JavaScript.

What you get

• Every submission emailed to you and stored forever in an inbox with New / Replied / Closed statuses.
• Reply from the inbox, add tags and notes, search, export CSV or JSON.
• Spam filtering with a honeypot, rate limiting and content checks; hCaptcha, reCAPTCHA or Turnstile if you want it.
• 500 submissions a month free. Pro adds file uploads, Google Sheets, Notion, Slack, webhooks and reminders.

Other platforms

Lovable · Bolt · v0 · WordPress · Shopify · Wix · Squarespace · Framer · Webflow · Carrd · Plain HTML · React · Next.js · Hugo, Jekyll & Eleventy · Vue & Nuxt · Svelte & SvelteKit