🍑 Peach Form

← Back to Recipes

Static HTML Form Example

Plain HTML with vanilla JS — no build step, no dependencies.

1. Copy the HTML

Save this as index.html and open it in any browser. No server required.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Contact</title>
</head>
<body>
  <form id="contact-form">
    <label>
      Name
      <input name="name" placeholder="Jane Doe" required />
    </label>
    <label>
      Email
      <input name="email" type="email" placeholder="[email protected]" required />
    </label>
    <label>
      Message
      <textarea name="message" placeholder="Your message…" required></textarea>
    </label>
    <button type="submit">Send</button>
    <p id="status" hidden></p>
  </form>

  <script>
    const ENDPOINT = "https://api.peachform.com/f/YOUR_FORM_ID";
    const form = document.getElementById("contact-form");
    const status = document.getElementById("status");

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      status.hidden = true;

      const data = Object.fromEntries(new FormData(form));

      try {
        const res = await fetch(ENDPOINT, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(data),
        });

        status.hidden = false;
        status.textContent = res.ok
          ? "Thanks! Your message was received."
          : "Error sending. Please try again.";
      } catch {
        status.hidden = false;
        status.textContent = "Network error. Please try again.";
      }
    });
  </script>
</body>
</html>

2. Replace YOUR_FORM_ID

Copy your form endpoint from the Peach Form dashboard. Swap YOUR_FORM_ID in the ENDPOINT constant at the top of the script block.

Expected Behavior

// Submit form → POST sent to Peach Form
// On success → "Thanks! Your message was received."
// On non-200  → "Error sending. Please try again."
// On network error → "Network error. Please try again."