Contact form for Astro
A statically built Astro site has no server to accept forms. Instead of setting up an adapter and server rendering, send the form to FormPost. We forward the input to you by email.
Before you start: create a form in FormPost
Sign up for FormPost, create a form and enter the domain your site runs on. We then show you your form's address. It replaces https://www.formpost.eu/f/abc123 in the code below – nothing else needs to change.
1. Create a form component
The component contains only HTML and no JavaScript. Astro ships it exactly as it is.
<form action="https://www.formpost.eu/f/abc123" method="POST" data-astro-reload>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<input type="text" name="_gotcha" style="display:none;" tabindex="-1" autocomplete="off">
<button type="submit">Send</button>
</form>
2. Use the component
Import the component on the page where the form should appear.
---
import ContactForm from '../components/ContactForm.astro';
---
<ContactForm />
Good to know
- If you use the ClientRouter (formerly View Transitions), Astro handles form submissions itself. The data-astro-reload attribute in the code above turns that off for this form so it goes to FormPost as usual. Without the ClientRouter it does no harm.
- We only accept submissions from the domain you entered. Submissions from the local development server (astro dev on localhost) are rejected; to try things out, use the test form in your dashboard.
- You need neither an adapter nor server rendering. The form works with a fully static build.
What FormPost cannot do today
- Forms are submitted the classic way, meaning the page changes. Sending in the background via JavaScript is not supported at present.
- We do not accept file attachments.
- FormPost does not collect consent from your visitors. The notice in your own privacy policy remains your job – the wording for it is waiting, ready to copy, next to your form.
More guides and comparisons
Create a form and try it
The Free plan covers one form with ten notifications a day and costs nothing, permanently.