Add a contact form to an Astro site

1. Create the form in embedio

Sign up (the Free plan includes 500 submissions a month and needs no card), create a form, and copy its key. It looks like frm_ followed by ten characters. Everywhere below, replace frm_your_form_key with yours.

The form key is meant to be public: it only lets people submit to that one form, never read anything. It's safe in client-side code and in your repository.

2. A form component

This ships no JavaScript. The browser posts the form, and embedio sends people to /thanks on your site afterwards.

---
const endpoint = "https://api.tryembedio.com/f/frm_your_form_key";
---

<form id="contact" action={endpoint} method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

  <!-- Where to send people after a successful submit (same site) -->
  <input type="hidden" name="_redirect" value="/thanks">

  <button type="submit">Send</button>
</form>

Use it on any page with <ContactForm /> and add src/pages/thanks.astro for the confirmation.

3. Optional: submit without leaving the page

Add this script to the same component. Astro bundles it once, and if it fails to load the plain form above still works.

<p id="contact-status" role="status" aria-live="polite"></p>

<script>
  const form = document.querySelector<HTMLFormElement>("#contact");
  const status = document.querySelector("#contact-status");

  form?.addEventListener("submit", async (event) => {
    event.preventDefault();
    if (status) status.textContent = "Sending…";

    const response = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const body = await response.json().catch(() => ({}));

    if (response.ok) {
      form.reset();
      if (status) status.textContent = body.message ?? "Thanks! Your message is on its way.";
    } else if (status) {
      status.textContent =
        body.error === "validation_failed"
          ? body.fields.map((f: { message: string }) => f.message).join(" ")
          : "Something went wrong. Please try again.";
    }
  });
</script>

Sending FormData keeps file inputs working: name the input file and enable the Uploads module. Because the request doesn't set a JSON content type, the Accept header is what makes embedio reply with JSON.

Spam and validation

• Honeypot: a hidden _gotcha field. People never see it; bots that fill it get a normal-looking success and nothing is stored.
• Double clicks: an identical submission seconds after the first is dropped instead of stored twice.
• Trust level: each form has a relaxed, balanced or strict setting for bursts and repeated content. Flagged submissions are kept aside for review, not deleted.
• Server-side rules: validations such as required, email or max length run on embedio, so they hold even if someone skips your front end.

Getting notified

Every submission shows up in your dashboard straight away. To also get an email for each one, add an Email connection to the form; that works on every plan, including Free. Slack, Discord, Zapier, webhooks and the other connections come with any paid plan, from $9/mo.

Errors you might see

With a JSON request, every failure comes back as a status code plus { "error": "..." }. A plain HTML post gets a readable error page instead.

The full list, including module-specific errors, is in the API reference.