Today I am wrangling form submission logic into my Astro projects with a sprinkle of Netlify magic and no backend server needed. Let’s talk about how a little HTML can open big conversations.
I’ll show you how I used Netlify Forms with Astro to collect contact info from potential collaborators, clients, and readers. All using static HTML — no database, no server, no drama.
No JavaScript. No client-side chaos. Just plain HTML. Netlify parses this from your static build and generates an endpoint for free.
<form name="contact" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact" />
<p>
<label>Your Name: <input type="text" name="name" /></label>
</p>
<p>
<label>Your Email: <input type="email" name="email" /></label>
</p>
<p>
<label>Message: <textarea name="message"></textarea></label>
</p>
<p><button type="submit">Send</button></p>
</form>
Once you push your Astro build to Netlify, it automatically scans your HTML for data-netlify="true" and creates a submission endpoint. Boom. You now have serverless form handling.
Go to your Netlify dashboard → select your site → Forms tab. If your form shows up there, you nailed it. Try submitting a test message and give yourself a high-five.
Add a honeypot field that bots won’t resist. Netlify will ignore submissions with this filled.
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<input type="hidden" name="form-name" value="contact" />
<p hidden><label>Don’t fill this out: <input name="bot-field" /></label></p>
...
</form>
Contact form done and ready to accept input from friends, clients, and possibly confused AIs.
Here's a link to Netlify Form Docs if you want more than pre tags.
See you in the logs,
Lorelei Noble