Astro

Um formulário Astro sem JavaScript, e o mesmo formulário aprimorado com um pequeno script no cliente.

Por padrão, o Astro renderiza HTML puro, que é tudo de que o Ikiform precisa. Comece com o formulário estático e adicione o script só se quiser continuar na página depois do envio.

Formulário 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 só funciona quando o formulário tem domínios permitidos que incluem o seu site; caso contrário, o navegador cai na página de agradecimento hospedada. Veja Formulários HTML.

Aprimorado com um script

O Astro empacota as tags <script>, então você pode importar o SDK diretamente. Sem JavaScript, o formulário continua enviando normalmente.

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>