JavaScript puro

Mejora progresivamente un formulario HTML con fetch: errores en línea por campo, un mensaje de estado y sin recargar la página.

Esta página no necesita paso de build ni paquetes. El formulario funciona como un envío HTML normal cuando JavaScript está desactivado; con JavaScript activo, el script envía con fetch y muestra el resultado en la página.

contact.html

<form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" novalidate>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required aria-describedby="email-error" />
  <p id="email-error" data-error-for="email"></p>
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
  <p id="message-error" data-error-for="message"></p>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
  <p role="status" data-status></p>
</form>

<script type="module">
  const form = document.querySelector("#contact");
  const button = form.querySelector("button");
  const status = form.querySelector("[data-status]");

  function showErrors(fields = {}) {
    for (const slot of form.querySelectorAll("[data-error-for]")) {
      const messages = fields[slot.dataset.errorFor];
      slot.textContent = messages ? messages[0] : "";
      form.elements[slot.dataset.errorFor]?.setAttribute("aria-invalid", messages ? "true" : "false");
    }
  }

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    button.disabled = true;
    status.textContent = "Sending";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      showErrors(result.ok ? {} : result.error.fields);
      status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Check your connection and try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

Accept: application/json hace que Ikiform responda con JSON en lugar de una redirección.
result.error.fields está indexado por id de campo; el script escribe el primer mensaje debajo de cada campo.
fetch solo se rechaza ante fallos de red. Los errores HTTP igualmente se resuelven, con el formato de error en el cuerpo.
Una respuesta 429 incluye Retry-After, que el código del navegador puede leer porque Ikiform la expone mediante CORS.

Con la verificación humana de Ikiform

La página de verificación intermedia solo aparece en navegaciones normales del navegador. Un envío con fetch a un formulario con la verificación de Ikiform recibe 403 challenge_required en su lugar. Usa challenge del SDK a través de tu bundler, o deja que el formulario se envíe sin JavaScript.