astro-onsubmit

Astro

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

Installation

bash

npm install astro-onsubmit

Quick start

Option A — Astro Integration (recommended)

// 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>:

astro

---
// 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:

astro

---
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:

javascript

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 message element

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

astro

<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.