Astro

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

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

정적 폼

src/components/Contact.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 폼을 참고하세요.

스크립트로 향상하기

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

src/components/Contact.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>