How to Connect Astro Forms to Form2Lead
Step-by-step developer instructions for Astro applications.
How do you send Astro form submissions to Form2Lead?
Add a contact form to any static Astro site — forms post client-side to Form2Lead, so Astro works on Vercel, Netlify, Cloudflare Pages, or GitHub Pages.
Why use Form2Lead with Astro?
Astro builds static output by default, and a static site has no server to receive form POSTs. Because a Form2Lead form is plain HTML that posts from the visitor’s browser, your Astro contact form works on any host — Vercel, Netlify, Cloudflare Pages, GitHub Pages, or a bare VPS — with `output: "static"` untouched and no adapter required. Submissions are spam-filtered with a honeypot plus IP rate limiting, emailed to you instantly, and stored in a searchable dashboard with one-click CSV export and optional webhooks.
Prerequisites
- ✔An Astro project
- ✔A Form2Lead endpoint URL
Step-by-Step Integration Guide
01. Create HTML Form in Astro Component
Add a standard HTML form tag with your Form2Lead action URL.
--- // ContactForm.astro --- <form action="https://form2lead.com/api/v1/f/YOUR_FORM_ID" method="POST"> <label for="name">Name</label> <input id="name" type="text" name="name" required /> <label for="email">Email</label> <input id="email" type="email" name="email" required /> <button type="submit">Submit Lead</button> </form>
02. Add the Honeypot Spam Field
Add an invisible `_gotcha` input so Form2Lead silently drops bot submissions.
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
03. (Optional) AJAX Submit Without a Page Reload
Use an Astro `<script>` to POST FormData with fetch and an Accept: application/json header, then show inline feedback.
<script>
document.querySelector('#contact-form')?.addEventListener('submit', async (e) => {
e.preventDefault();
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
body: new FormData(e.target),
headers: { 'Accept': 'application/json' },
});
if (res.ok) document.querySelector('#status').textContent = 'Lead sent!';
});
</script>04. Lock Down Allowed Domains
Add your deployed origin (for example `mysite.pages.dev` or your custom domain) to the form’s Allowed Domains list in Form2Lead.
05. Deploy Anywhere and Test
Run `astro build` and deploy — the form works identically on Vercel, Netlify, Cloudflare Pages, and GitHub Pages because the POST happens client-side. Submit a test lead and confirm the email notification and dashboard entry.
Astro Integration FAQ
Do I need SSR enabled in Astro to use Form2Lead?
No. Form2Lead works perfectly with static Astro builds (`output: "static"`) — no adapter, no server endpoint, no islands required. SSR builds work too, since the submission still posts from the browser.
Does an Astro contact form work on Vercel, Netlify, Cloudflare Pages, or GitHub Pages?
Yes, on all of them. The form posts client-side to the Form2Lead endpoint, so the host is irrelevant — your Astro site stays fully static and you can switch hosts without touching the form.
Can I use Astro Actions or an API route instead?
You can — but that requires an adapter and a server runtime for a problem Form2Lead already solves: validation, spam filtering, email routing, and lead storage. With Form2Lead your build stays static and your host options stay open.
How do I stop spam on a static Astro contact form?
Include the hidden `_gotcha` honeypot input from step 02. Form2Lead also rate-limits by IP server-side, so bot floods are rejected with zero JavaScript and no friction for human visitors.
Does the Astro form work without JavaScript?
Yes. The plain form action is a native browser POST, so submissions succeed with JavaScript disabled. The AJAX script in step 03 is an optional enhancement for inline success messages.