# Astro

> A zero-JavaScript Astro form, and the same form enhanced with a small client script.

Astro renders plain HTML by default, which is all Ikiform needs. Start with the static form and add the script only if you want to stay on the page after submit.

## Static form

`src/components/Contact.astro`:

```astro
---
const endpoint = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
---

<form action={endpoint} method="post">
  <label>
    Email
    <input name="email" type="email" required />
  </label>
  <label>
    Message
    <textarea name="message"></textarea>
  </label>
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>
```

`_redirect` only works when the form has allowed domains that include your site; otherwise the browser lands on the hosted thank-you page. See [HTML forms](https://ikiform.com/docs/html.md#redirect-rules).

## Enhanced with a script

Astro bundles `<script>` tags, so you can import the SDK directly. Without JavaScript the form still posts normally.

`src/components/Contact.astro`:

```astro
<form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <textarea name="message"></textarea>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
  <p role="status" data-status></p>
</form>

<script>
  import { submit } from "@ikiform/sdk";

  const form = document.querySelector("#contact");
  const status = form.querySelector("[data-status]");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    status.textContent = "Sending";
    const result = await submit("frm_xxxxxxxxxxxxxxxx", new FormData(form));
    status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
    if (result.ok) form.reset();
  });
</script>
```