Forms

Choose a delivery method

Astro Stack supports two server-side contact handlers:

Both selections create .env.example with the names to configure and src/pages/api/contact.ts with the server endpoint. Copy the example to .env for local development, then provide the same values through your deployment host’s environment-variable settings.

Form interface

The generator creates a reusable src/components/ContactForm.astro component that submits name, email, and message to /api/contact, with browser-side success and error feedback. Marketing and Client starters render it automatically when a forms integration is selected. Import it into another page when you want a different layout.

<form method="post" action="/api/contact">
  <input name="name" autocomplete="name" />
  <input name="email" type="email" autocomplete="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send message</button>
</form>

The endpoint returns JSON. For a polished browser experience, submit with client-side JavaScript and display its success or error response. The handler rejects requests missing an email or message; Resend also returns an error when delivery fails, and webhook forwarding returns an error when the destination does not accept the request.

Protect the configuration

Never commit .env. It is ignored by default. Keep WEBHOOK_URL private, and use a sending-only Resend API key with a verified sender domain before enabling live email delivery.