astro-onsubmit

Drop-in Astro.js integration for onsubmit.dev.
Add a data-onsubmit attribute to any form — submissions are automatically sent to your onsubmit.dev endpoint via fetch. No backend required.

Installation

npm install astro-onsubmit

Quick start

Option A — Astro Integration (recommended)

Register the integration once in astro.config.mjs and it applies to every page:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import onsubmit from 'astro-onsubmit';

export default defineConfig({
  integrations: [onsubmit()],
});

Then add data-onsubmit="your-form-id" to any <form>:

---
// src/pages/contact.astro
---
<form data-onsubmit="YOUR_FORM_ID">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Your form ID is available in the onsubmit.dev dashboard after creating a form.

Option B — Component (no config change needed)

Import and use the OnSubmitForm component directly on any page:

---
import OnSubmitForm from 'astro-onsubmit/OnSubmitForm.astro';
---

<OnSubmitForm formId="YOUR_FORM_ID" successMessage="Thanks! We'll be in touch.">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <button type="submit" data-onsubmit-loading="Sending…">Send</button>
</OnSubmitForm>

Attributes

| Attribute | Where | Description | |---|---|---| | data-onsubmit | <form> | Required. Your onsubmit.dev form ID. | | data-onsubmit-success | <form> | Text shown in place of the form on success. | | data-onsubmit-error | <form> | Custom error message shown on failure. | | data-onsubmit-loading | <button type="submit"> | Button text while submitting. |

Events

Listen on the form element for custom events:

document.querySelector('form[data-onsubmit]').addEventListener('onsubmit:success', (e) => {
  console.log('Submitted! ID:', e.detail.id);
});

document.querySelector('form[data-onsubmit]').addEventListener('onsubmit:error', (e) => {
  console.error('Error:', e.detail.error);
});

Error messages

Add a <p class="onsubmit-error-message" hidden> inside your form — it will be revealed automatically on API errors:

<form data-onsubmit="YOUR_FORM_ID">
  <input name="email" type="email" required />
  <button type="submit">Subscribe</button>
  <p class="onsubmit-error-message" hidden></p>
</form>

File uploads

File inputs are handled automatically. When the form contains a file field, the data is sent as multipart/form-data. Otherwise, JSON is used.

Integration options

onsubmit({
  // Override the default API base URL (useful for self-hosted deployments)
  endpoint: 'https://your-instance.example.com/f',
})

View Transitions

The integration listens for astro:page-load and re-scans the DOM automatically, so forms inside View Transitions work without any extra configuration.

License

MIT