Make the AstroWind contact form work

AstroWind's contact form has no action, so it sends messages nowhere. Point it at a form endpoint and every message is stored and emailed to you. No server, no adapter, two minutes.

Why the AstroWind contact form does nothing

src/components/ui/Form.astro opens with a bare tag:

<form>

With no action and no method, the browser sends a GET to the current page. <ClientRouter /> swaps the page in place, the visitor thinks the message went through, and the message ends up in the address bar:

/contact?name=Jane+Doe&email=jane%40example.com&message=Hello

The same component renders the forms of the landing pages in src/pages/landing/, so the fix below covers them too.

Fix it in Form.astro

1. Create a form in Stashform and copy its endpoint from the Setup tab.
2. Set site in src/config.yaml to your real domain.
3. Replace the <form> tag of src/components/ui/Form.astro:

<form action="https://www.stashform.com/api/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
  <input type="hidden" name="_redirect" value={new URL('/thank-you', Astro.site).href} />

• _gotcha is a honeypot. Bots fill it in, and their submission is flagged as spam instead of reaching your inbox.
• _redirect sends the visitor back to your site, on the Pro plan. Use Astro.site, not Astro.url: in a static build, Astro.url is http://localhost:4321. On the Free plan, visitors see Stashform's thank-you page.
• <ClientRouter /> does not intercept a form that posts to another domain. The browser submits it normally, with no extra config.

Keep AstroWind's fields as they are: name, email, message and the disclaimer checkbox each become a column. email is the Reply-To of the notification, so you answer a visitor from your inbox.

Add the thank-you page

AstroWind has no page to land on. Create src/pages/thank-you.astro:

---
import Layout from '~/layouts/PageLayout.astro';
import HeroText from '~/components/widgets/HeroText.astro';

const metadata = { title: 'Thank you', robots: { index: false } };
---

<Layout metadata={metadata}>
  <HeroText tagline="Contact" title="Thanks, your message is on its way!" />
</Layout>

No thank-you page? Drop the _redirect line and Stashform shows its own.

Test it

Run npm run dev, send the form from /contact, then open your dashboard: the message is there. The notification email follows.

In dev, Astro.site is still your live domain, so the redirect lands on the live /thank-you, which may not exist yet. The message is stored anyway.

Connect the newsletter form

The Newsletter widget on the blog page (src/pages/[...blog]/[...page].astro) also posts nowhere. It takes an action prop:

<Newsletter
  action="https://www.stashform.com/api/f/YOUR_FORM_ID"
  tagline="Newsletter"
  title="New articles in your inbox"

The widget has no slot for _redirect: on the Pro plan, set Redirect URL in the form's Settings tab. Sign-ups export to CSV. Stashform collects them; it does not send the newsletter.

Troubleshooting

• The message is still in the address bar. The <form> tag has no action or method. Check you edited src/components/ui/Form.astro.
• "This form does not accept submissions from this website." Allowed domains is set and does not list the page's domain. It rejects localhost too: add it while you test.
• A test message is missing. Check the Spam filter. Browser autofill can fill the honeypot.
• The redirect goes to the wrong site. Check site in src/config.yaml.

Where your submissions go

Each message is stored before the email goes out, in the EU, by European providers only. Export or delete a form at any time.