Astro

Formulir Astro tanpa JavaScript, dan formulir yang sama yang ditingkatkan dengan skrip client kecil.

Astro merender HTML biasa secara default, dan itu saja yang dibutuhkan Ikiform. Mulai dengan formulir statis dan tambahkan skrip hanya jika Anda ingin tetap di halaman setelah dikirim.

Formulir statis

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 hanya berfungsi jika formulir punya domain yang diizinkan yang mencakup situs Anda; jika tidak, browser mendarat di halaman terima kasih hosted. Lihat Formulir HTML.

Ditingkatkan dengan skrip

Astro mem-bundle tag <script>, jadi Anda bisa mengimpor SDK secara langsung. Tanpa JavaScript, formulir tetap mengirim seperti biasa.

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>