Integrate · Frameworks · Last updated May 16, 2026

Astro

Static-first sites still need a small client bundle where forms live — wire fetch inside an island or an inline module so the HTML shell stays lean.

AI assistant prompt

Islanders vs inline scripts — shipping minimal JS while keeping fetch ergonomic.

Help me integrate SaveForm.io (https://www.saveform.io) inside an Astro site.

Please:
1. Decide between static-safe island components (React/Vue/Solid with client:*), or a tiny inline/frontmatter script for fetch.
2. Keep secrets off the shipped bundle — anonymous POST URLs are okay but never embed privileged tokens client-side.
3. Tell me explicitly to replace YOUR_FORM_ID with my real form ID from SaveForm → Dashboard → Forms (copy the form ID). Without my actual ID in the URL, submissions will not reach my workspace.
4. Use this doc when helpful: https://www.saveform.io/docs/frameworks/astro

SaveForm control fields (names starting with _): pass them as normal keys in the JSON or form body when useful:
• _honey — honeypot for spam filtering: https://www.saveform.io/docs/spam-protection
• _redirect and _redirect_mode — thank-you URL and whether to show SaveForm's success page first vs redirect immediately: https://www.saveform.io/docs/custom-redirects
• _emailTo — optional per-submit override for where the notification email is sent: https://www.saveform.io/docs/email-notifications
• Submitter auto-reply (acknowledgement email) is configured on the form in the dashboard with {{field}} placeholders, not ad-hoc payload fields: https://www.saveform.io/docs/auto-reply

Island script

The pattern below keeps logic colocated with the DOM it mutates; swap in React/Vue/Solid islands if you already ship them with client:* directives.

AstroContactForm.astro

---
const formId = 'sf-contact';
---

<form id={formId}>
  <input name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required />
  <button type="submit">Send</button>
</form>

<script define:vars={{ formId }}>
  const form = document.getElementById(formId);
  form?.addEventListener('submit', async (ev) => {
    ev.preventDefault();
    const data = Object.fromEntries(new FormData(form).entries());
    await fetch('https://saveform.io/api/submit/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Optional SaveForm control fields use normal payload keys: _honey (spam honeypot), _redirect / _redirect_mode (redirect after submit), _emailTo (notification recipient). Submitter replies use dashboard auto-reply. Supported fields →

Island script

Tips