# Astro

> Ein Astro-Formular ohne JavaScript und dasselbe Formular, erweitert mit einem kleinen Client-Skript.

Astro rendert standardmäßig reines HTML, und mehr braucht Ikiform nicht. Starte mit dem statischen Formular und füge das Skript nur hinzu, wenn du nach dem Absenden auf der Seite bleiben willst.

## Statisches Formular

`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` funktioniert nur, wenn das Formular erlaubte Domains hat, zu denen deine Website gehört; andernfalls landet der Browser auf der gehosteten Dankeseite. Siehe [HTML-Formulare](https://ikiform.com/de/docs/html.md#redirect-rules).

## Mit einem Skript erweitert

Astro bündelt `<script>`-Tags, sodass du das SDK direkt importieren kannst. Ohne JavaScript sendet das Formular weiterhin normal.

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