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

<Callout title="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.
</Callout>

## The page

```astro title="src/pages/contact.astro"
---
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](/docs/forms/after-submit) on the form.

## Submit without a page reload

To keep visitors on the page, use the [React](/docs/frameworks/react), [Vue](/docs/frameworks/vue) or [Svelte](/docs/frameworks/svelte) component as an island. Add the matching Astro integration, like `@astrojs/react`, then render the component with a client directive:

```astro title="src/pages/contact.astro"
---
import { ContactForm } from '../components/ContactForm.jsx'
---

<ContactForm client:load />
```