No island required
The basic form uses native HTML validation and submission. Its operation does not depend on hydrating a React or Vue component.
Form Koi for Astro
Astro contact form
without a server adapter.
Add a native HTML contact form to an Astro component. No island, client directive or server endpoint is needed for this example. Form Koi stores submissions and sends configured email notifications.
250 submissions/month free. No credit card required.
Your form → Form Koi
From website form to email notification.
- 01 / Your websiteYour fields, styles, and public form endpoint.
- 02 / Submission inboxReview the message and its spam status.
- 03 / Notification historySee the recipient and follow delivery attempts.
Start with native HTML in an Astro component.
Paste the markup into ContactForm.astro and include it in your contact page. The browser handles the POST, so you do not need a client:load directive or an Astro server endpoint for this flow.
Choose your host
Deploy the generated site to a static host. Set the deployed origin in Form Koi and test the form from that exact domain.
Enhance when you need to
Keep native navigation or add a JavaScript handler for inline feedback. Use multipart requests for attachments rather than converting files to JSON.
ExploreCopy, connect, send
Copy the Astro contact form example.
- Create a form and verify its recipient in your Form Koi workspace.
- Replace the complete example endpoint with the URL from your connection guide.
- Keep the honeypot name in sync with your form settings, then submit from your website.
This example uses a placeholder endpoint.
It will not deliver messages until connected to your form. It starts without Turnstile or file uploads. When you enable either, copy the updated example from your workspace.
<form action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
<label for="name">Your name</label>
<input id="name" name="name" autocomplete="name" required>
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="message">Your message</label>
<textarea id="message" name="message" required></textarea>
<!-- Leave this hidden anti-spam field empty. -->
<input type="text" name="botcheck"
tabindex="-1" autocomplete="off" style="display:none" hidden>
<button type="submit">Send message</button>
</form>---
import ContactForm from "../components/ContactForm.astro";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Contact us</title>
</head>
<body>
<main><h1>Contact us</h1><ContactForm /></main>
</body>
</html>Style the fields to fit your website. For a complete HTML document with CSS, explore the form templates.
Before you publish
Test submission storage and email delivery.
Check the website
Test required fields and a real submission from your deployed domain. Configure allowed origins and your native thank-you destination.
ExploreCheck the inbox
Find the message and check Spam if it is missing. Confirm the chosen recipients and notification history; an accepted submission is not a delivery receipt.
ExploreCheck the limits
The allowance is shared across your workspace. At the monthly limit the API returns 429; provide a useful alternative way to contact you.
ExploreFrequently asked questions
Contact form
questions.
Do I need an Astro adapter?
Not for this form. Its POST goes directly to Form Koi. Your wider site may need an adapter for other server-rendered features.
Can I use it in a static Astro site?
Yes. Include the component in a page and deploy normally. A static file host serves the frontend; Form Koi receives the submission.
What about client-side navigation?
The native form does not need a JavaScript initialization listener. If you add an enhanced submit handler, handle initialization and cleanup around your Astro navigation lifecycle and test repeat visits.
Start with Form Koi Free