Astro

Un formulaire Astro sans JavaScript, et le même formulaire amélioré par un petit script client.

Astro produit du HTML simple par défaut, et c'est tout ce dont Ikiform a besoin. Commencez par le formulaire statique et n'ajoutez le script que si vous voulez rester sur la page après l'envoi.

Formulaire statique

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 ne fonctionne que si le formulaire a des domaines autorisés qui incluent votre site ; sinon, le navigateur arrive sur la page de remerciement hébergée. Voir Formulaires HTML.

Amélioré par un script

Astro bundle les balises <script>, vous pouvez donc importer le SDK directement. Sans JavaScript, le formulaire envoie toujours normalement.

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>