Astro contact form without a server
Astro builds static pages by default, so there is no server to receive forms. Mailiy takes that job. You need no adapter and no JavaScript framework.
How to set it up
- Create a free account, add your website and copy the form's key.
- Create the component below and replace YOUR_ACCESS_KEY.
- Import it on your contact page and add <ContactForm />.
- Build and deploy the site and send a test.
src/components/ContactForm.astro
---
// src/components/ContactForm.astro
---
<form action="https://mailiy.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="email" name="email" required>
<textarea name="message" required></textarea>
<input type="checkbox" name="botcheck" style="display:none">
<button>Send</button>
</form>What to know about Astro
- To stay on the page instead of being redirected, add the Mailiy script as well (see below).
- With React, Vue or Svelte islands you can use their examples instead.
Stay on the page
Without the script, Mailiy redirects to a thank-you page after sending. With this line the browser sends the form in the background and shows the answer below it:
<script src="https://mailiy.com/client/script.js" defer></script>Custom messages and events are described in the guides.
Fields Mailiy understands
Every named field appears in the email and in the dashboard. Mailiy reads a few names itself and uses them to shape the mail and what happens after sending:
| Name | Effect |
|---|---|
subject | Subject of the email. Without it, Mailiy uses the subject from the form settings. |
from_name | Sender name shown in the inbox, for example the name of your website. |
email / replyto | Address of the person filling in the form. Hitting reply writes straight back to them. |
redirect | Address the browser goes to after sending, for example your own thank-you page. |
ccemail / bccemail | More recipients in Cc or Bcc, separated by semicolons. Only addresses confirmed in your account count. |
consent | Consent checkbox. If you require it in the dashboard, Mailiy refuses submissions without the tick. |
botcheck | Invisible trap for bots. As long as it stays empty, all is well. |
Sending files
With a file input, your Astro form accepts attachments too, up to five files with 10 MB in total. PDF, images, text and office files are allowed. Mailiy checks that each file's content matches its extension and refuses anything else.
For the browser to send the files, the form tag also needs enctype="multipart/form-data".
If no email arrives
Mailiy answers every submission with a message. Usually it comes down to one of these:
- Wrong key. The answer says “Invalid access key”. Copy the key from the dashboard again, without spaces before or after it.
- Domain not allowed. If you listed allowed domains in the dashboard, Mailiy only accepts submissions from them. Subdomains count too. To test on a preview address, add it for the time being.
- Field without a name. The browser leaves out any input without a name attribute. It is then missing from the email, and no error shows up.
- Too many tests in a row. Mailiy accepts five submissions a minute per form and visitor. After that you get “Too many submissions”, and after a short wait it works again.
- Mail in the spam folder. Check the spam folder first and mark the first mail as not spam. If the submission shows up in the dashboard, Mailiy received it.
- New recipient gets nothing. Additional recipients only get mail once they confirm their address with the link in the confirmation email.
After sending
Every submission lands in the dashboard, where you can search them and export them to CSV. In the form settings you can also set up an automatic reply that goes to the address in the email field, such as “Thanks, we'll get back to you within two days”.
If your team should see messages in chat too, Mailiy also posts them to Slack, Discord or Telegram. For your own workflows, webhooks send each submission as JSON to an address you choose.
Spam and privacy
The invisible botcheck field is a trap for bots. If they tick it, Mailiy drops the submission without storing or sending it. You can add more filters and a captcha in the dashboard.
Mailiy runs on servers in Germany and sets no trackers. What else a GDPR compliant form needs is covered in the GDPR checklist.
Frequently asked questions
Does it run on Netlify, Vercel or GitHub Pages?
Yes, on any static host. The form posts straight to Mailiy, so the host doesn't need to handle forms.
Do I need my own server for a contact form in Astro?
No. The form posts to Mailiy, and Mailiy sends the email. You need no PHP, no SMTP credentials and no server code.
Is it fine for the key to appear in the page source?
Yes. It only allows sending submissions to this one form and gives no access to your account. In the dashboard you choose which domains submissions are accepted from.
What does it cost?
The free plan includes 100 submissions a month for one website. Paid plans start at €9 a month.