Contact Form Examples

<form action="https://api.staticforms.dev/submit" method="POST">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

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

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

<form action="https://api.staticforms.dev/submit" method="POST">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />
  <input type="hidden" name="redirectTo"
         value="https://yoursite.com/thank-you" />

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject" />

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

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

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form action="https://api.staticforms.dev/submit" method="POST">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

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

  <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>

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

<form action="https://api.staticforms.dev/submit" method="POST"
      enctype="multipart/form-data">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

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

  <label for="attachment">Attachment</label>
  <input type="file" id="attachment" name="attachment" />

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

<form action="https://api.staticforms.dev/submit" method="POST"
      class="mx-auto" style="max-width:540px">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />

  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" name="name" required />
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" required />
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" name="message"
              rows="5" required></textarea>
  </div>
  <button type="submit" class="btn btn-primary w-100">Send Message</button>
</form>

<form action="https://api.staticforms.dev/submit" method="POST"
      class="max-w-md mx-auto space-y-4">
  <input type="hidden" name="apiKey" value="YOUR_API_KEY" />

  <div>
    <label for="name" class="block text-sm font-medium mb-1">Name</label>
    <input type="text" id="name" name="name" required
      class="w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2
             focus:ring-indigo-500" />
  </div>
  <div>
    <label for="email" class="block text-sm font-medium mb-1">Email</label>
    <input type="email" id="email" name="email" required
      class="w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2
             focus:ring-indigo-500" />
  </div>
  <div>
    <label for="message" class="block text-sm font-medium mb-1">Message</label>
    <textarea id="message" name="message" rows="5" required
      class="w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2
             focus:ring-indigo-500"></textarea>
  </div>
  <button type="submit"
    class="w-full rounded-md bg-indigo-600 px-4 py-2 text-white font-medium
           hover:bg-indigo-700 transition">Send Message</button>
</form>

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const data = new FormData(e.target);
    data.append("apiKey", "YOUR_API_KEY");

    const res = await fetch("https://api.staticforms.dev/submit", {
      method: "POST",
      body: data,
    });

    setStatus(res.ok ? "success" : "error");
  }

  if (status === "success") return <p>Thanks! We'll be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={5} required />

      <button disabled={status === "sending"} type="submit">
        {status === "sending" ? "Sending..." : "Send Message"}
      </button>
    </form>
  );
}

"use client";
import { useState, type FormEvent } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle");

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const body = new FormData(e.currentTarget);
    body.append("apiKey", "YOUR_API_KEY");

    const res = await fetch("https://api.staticforms.dev/submit", {
      method: "POST",
      body,
    });

    setStatus(res.ok ? "success" : "error");
  }

  if (status === "success") {
    return <p>Thank you! Your message has been sent.</p>;
  }

  return (
    <form onSubmit={onSubmit} className="space-y-4 max-w-md">
      <input name="name" placeholder="Name" required className="w-full border p-2 rounded" />
      <input name="email" type="email" placeholder="Email" required className="w-full border p-2 rounded" />
      <textarea name="message" placeholder="Message" rows={5} required className="w-full border p-2 rounded" />
      {status === "error" && <p className="text-red-600">Something went wrong. Please try again.</p>}
      <button disabled={status === "sending"} type="submit"
        className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 disabled:opacity-50">
        {status === "sending" ? "Sending..." : "Send Message"}
      </button>
    </form>
  );
}