Contact form for Astro websites

Paste the snippet above into any .astro page or component. Set PUBLIC_SPLITFORMS_KEY in your .env file. That's it — no install, no astro:integrations, no adapter changes.

Yes — both. In SSG (output: 'static') the form posts directly to splitforms.com from the browser. In SSR (output: 'server' or 'hybrid') you can additionally use Astro Actions to keep the key server-side. Pick whichever fits.

If you're using Astro Actions, render result?.error?.message from Astro.getActionResult(actions.contact). A pure HTML submission uses splitforms's built-in error page; use fetch or an Astro Action when you need a custom inline error state.

Yes. Build the form as a React/Vue/Svelte component, hydrate with client:visible or client:idle, and use the framework-specific snippet from the matching /forms/<framework> page.

Add a hidden redirect field pointing at /thanks for a native POST — splitforms sends the browser there after success, free on every plan — or set a default in Dashboard → Form settings → Redirect for when no hidden field is present. With Astro Actions, render success state from result.data or navigate in your action instead.

No. The default snippet uses zero JavaScript — it's a vanilla <form action method=POST>. JavaScript only runs if you choose the island pattern or wire up custom client-side validation.

Astro mirrors Vite's env-var convention: only variables prefixed with PUBLIC_ are exposed to client-side code (and to .astro files when output: 'static'). If you write import.meta.env.SPLITFORMS_KEY, you'll get undefined at build time. Rename to PUBLIC_SPLITFORMS_KEY.

If you wrap the form in <MyForm client:load />, you ship a full React/Preact runtime just for one form. Use client:visible (load when scrolled into view) or client:idle (load after main thread is free) instead. For zero-JS forms, skip the island entirely and use a plain HTML form action.

If your action throws, Astro 5's behavior is to render an error page rather than return the error to your form. Wrap the splitforms fetch in try/catch and return { success: false, message } from the action — your form component can then render the message.

If you've enabled <ViewTransitions /> in your layout, navigating to /contact and back may re-mount the form mid-submission. Add data-astro-reload to the form's submit anchor or guard with if (status === 'loading') return at the top of your handler.

If output: 'static' in astro.config.mjs, you can't have a server endpoint at all — your form must POST directly to splitforms.com. That's the recommended setup. Switch to output: 'server' or 'hybrid' only if you genuinely need a server-side proxy.

Astro requires the --- fence at the top of .astro files for any frontmatter (imports, Astro.props, env reads). If you write const accessKey = import.meta.env.PUBLIC_SPLITFORMS_KEY; without the surrounding fence, Astro treats the line as plain text in the rendered HTML — you'll see the JavaScript leak into the page above your form. The build doesn't error; it just renders nonsense. Always wrap any logic in --- and reference values via {accessKey} in the template body.

Astro's whole pitch is shipping zero JavaScript by default. A native contact form on Astro means either (a) building a form with no submission target — useless — or (b) standing up an API endpoint via output: 'server' or 'hybrid', which means writing a Node/Bun/Deno handler, picking an email provider, writing your own honeypot logic. Astro 5 added typed Actions, but they're a wrapper around the same underlying fetch — you still deliver the email yourself. The result: every Astro contact-form tutorial ends with 'now configure SendGrid'. Splitforms is the SendGrid-replacement that doesn't require an account, an API key for the email provider, or DNS records for SPF/DKIM.

Astro deploys cleanly to Vercel, Netlify, Cloudflare Pages, GitHub Pages, and any static host with output: 'static'. For Astro Actions (Pattern B), you need output: 'server' or 'hybrid' and a matching adapter (@astrojs/vercel, @astrojs/netlify, @astrojs/cloudflare). On Cloudflare Pages with the Cloudflare adapter, the Action runs in a Worker — keep the splitforms fetch tight (no extra proxying) to stay under the 10ms CPU budget on the free plan. The PUBLIC_ prefix is mandatory for env vars exposed to client-rendered .astro files; vars without it are silently undefined. Lock the key to your *.pages.dev and custom domain.