FormRill
  1. Docs
  2. Quick starts

Astro contact form without a backend

A static Astro build has no server to handle a form POST. You could add an SSR adapter and an API endpoint for one form, or post to FormRill and keep the site fully static.

1. Create a component

Save as src/components/ContactForm.astro:

---
const formId = import.meta.env.PUBLIC_FORMRILL_FORM_ID
// Absolute URL for the thank-you page. Falls back if `site` isn't set in astro.config.
const thanks = Astro.site ? new URL('/thanks', Astro.site).href : 'https://example.com/thanks'
---
<form action={`https://api.formrill.com/${formId}/submit`} method="POST">
  <input type="hidden" name="redirect" value={thanks} />
  <input type="checkbox" name="botcheck" hidden />
  <label>Name <input name="name" required /></label>
  <label>Email <input type="email" name="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button>Send</button>
</form>

Put your form ID in .env:

PUBLIC_FORMRILL_FORM_ID=f_…

The PUBLIC_ prefix is fine: the form URL is public by design and can only submit. Reading submissions needs your dashboard login.

2. Use it

---
import ContactForm from '../components/ContactForm.astro'
---
<ContactForm />

Add a src/pages/thanks.astro page for the redirect, then deploy anywhere: GitHub Pages, Cloudflare Pages, Vercel or Netlify. The form keeps working if you change hosts.

Optional: analytics and validation

Add formrill.js to the page to see views, starts and drop-off for the form, and to validate postal codes and states as people type.

Get the form URL for this guide

Free up to 500 submissions a month and unlimited forms. No server, no credit card.

Start free

Related

Last updated