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 がなくても、フォームは通常どおり送信されます。

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>