Astro

Un formulario de Astro sin JavaScript, y el mismo formulario mejorado con un pequeño script de cliente.

Astro renderiza HTML por defecto, que es todo lo que Ikiform necesita. Empieza con el formulario estático y añade el script solo si quieres quedarte en la página después del envío.

Formulario estático

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 solo funciona cuando el formulario tiene dominios permitidos que incluyen tu sitio; si no, el navegador llega a la página de agradecimiento alojada. Consulta Formularios HTML.

Mejorado con un script

Astro empaqueta las etiquetas <script>, así que puedes importar el SDK directamente. Sin JavaScript, el formulario sigue enviándose de forma normal.

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>