Astro forms
Add a form to an Astro site with plain HTML and zero client-side JavaScript, or with a React, Vue or Svelte island.
Astro pages are static by default, and a plain HTML form works with zero client-side JavaScript. The browser posts it straight to Nisuform and shows the thank-you page.
Generated for your form
The form's Setup tab, under Code, has this page ready with your endpoint and field names filled in. Your design gives you the styled form from the builder, with its styles and script inline so Astro doesn't bundle or scope them. Your own styles gives you plain markup to style your way.
The page
---
const endpoint = 'https://api.nisuform.com/s/YOUR_FORM_KEY'
---
<form action={endpoint} method="POST">
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" rows="5" required></textarea>
</label>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display: none" />
<button type="submit">Send</button>
</form>To send visitors back to your own page after they submit, set a redirect on the form.
Submit without a page reload
To keep visitors on the page, use the React, Vue or Svelte component as an island. Add the matching Astro integration, like @astrojs/react, then render the component with a client directive:
---
import { ContactForm } from '../components/ContactForm.jsx'
---
<ContactForm client:load />