Skip to content
Docs
Français formerie.com Sign up
 Docs

Try a topic, a function name, or an error code such as FORM_CLOSED.

 Français formerie.com

Astro quickstart

Most Astro sites do best with the script embed. To build the form yourself, add this working contact form to an Astro page.

Install

Install @formerie/client
Shell 
npm install @formerie/client

Formerie packages are in alpha, so APIs can still change between releases.

Add the form

Save this as src/pages/contact.astro, or add it to a page you already have.

Astro
<form id="contact">
  <input name="name" placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button>Send</button>
  <p id="contact-result" role="status"></p>
</form>

<script>
  import { FormerieRuntimeClient } from "@formerie/client";

  const formerie = new FormerieRuntimeClient();
  const form = document.querySelector<HTMLFormElement>("#contact")!;
  const status = document.querySelector("#contact-result")!;

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const result = await formerie.submit("acme", "contact", {
      fields: Object.fromEntries(new FormData(form)),
    });
    status.textContent = result.ok ? "Thanks!" : result.error.message;
  });
</script>

Each input’s name is the field it fills in Formerie.

Set up the form in the app

  1. Open app.formerie.com and create a form named Contact. It comes with the name, email, and message fields this code sends.
  2. On the Delivery tab, add your email address, then choose Save delivery. Confirm the email Formerie sends you.
  3. On the Publish tab, choose API-only and add the address your dev server prints, such as http://localhost:4321, under Your website addresses. localhost and 127.0.0.1 count as different addresses. Add your live site’s address the same way when you deploy.
  4. Choose Publish form.
  5. In the code above, replace acme with the workspace handle shown on the Publish tab.

Check it arrived

Run your app, fill in the form, and send it. “Thanks!” appears on the page. In the app, your response shows under Submissions, and its email under Deliveries.

Seeing a CORS error, or NETWORK_ERROR? Your site’s address isn’t on the Publish tab yet, or you haven’t published since adding it. See Troubleshooting.

View as Markdown