Add a contact form to an Astro site
Handle Astro form submissions with SiteBackend. Works with fully static Astro builds - no server adapter or API route needed.
1 minUpdated
Astro sites are often fully static, so there's no server to receive a form. Point the form at SiteBackend instead. It works with output: "static", and no adapter is needed.
---
const endpoint = "https://api.sitebackend.com/forms/YOUR_FORM_ID";
---
<form action={endpoint} method="POST">
<input type="email" name="email" placeholder="[email protected]" required />
<textarea name="message" required></textarea>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none" />
<button type="submit">Send</button>
</form>Use it on any page:
---
import ContactForm from "../components/ContactForm.astro";
---
<ContactForm />Keep the endpoint out of your code
Put the endpoint in an environment variable. Astro exposes variables that start with PUBLIC_ to your pages:
PUBLIC_SITEBACKEND_FORM=https://api.sitebackend.com/forms/YOUR_FORM_ID<form action={import.meta.env.PUBLIC_SITEBACKEND_FORM} method="POST">Local development
If you use allowed origins, add http://localhost:4321, Astro's default dev address.
Show testimonials too
SiteBackend can also collect testimonials from your customers and show them on your site. See add testimonials to an Astro site.