# Astro

> JavaScript 없는 Astro 폼, 그리고 작은 클라이언트 스크립트로 향상한 같은 폼.

Astro는 기본적으로 일반 HTML을 렌더링하며, Ikiform에는 그것으로 충분합니다. 정적 폼으로 시작하고, 제출 후에도 페이지에 머물고 싶을 때만 스크립트를 추가하세요.

## 정적 폼

`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`는 폼의 허용 도메인에 여러분의 사이트가 포함된 경우에만 작동합니다. 그렇지 않으면 브라우저는 호스팅 감사 페이지로 이동합니다. [HTML 폼](https://ikiform.com/ko/docs/html.md#redirect-rules)을 참고하세요.

## 스크립트로 향상하기

Astro는 `<script>` 태그를 번들링하므로 SDK를 바로 가져올 수 있습니다. JavaScript가 없어도 폼은 평소처럼 POST됩니다.

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