Next.js の問い合わせフォーム

これを Next.js に貼ってください。送信先は Formgong です。データベースも Resend も要りません。

AIリード判定はどのプランでも無料で、月100件までです。フォームでオンにしてください。ホットリードとスパムの可能性は Telegram、メール、受信箱に出ます。

Next.js

"use client";

export function ContactForm() {
  async function onSubmit(event) {
    event.preventDefault();
    const fields = Object.fromEntries(new FormData(event.currentTarget));
    const response = await fetch("https://formgong.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    if (!result.success) throw new Error(result.message || "Formgong error");
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">Send</button>
    </form>
  );
}

無料ではじめる