A Next.js form that posts to a Discord channel

Setting it up

1. 01Submit from the client

   The browser posts directly to the endpoint, so the submission carries the visitor's own IP and user agent, which is what the spam filter scores.

   app/contact/contact-form.tsxCopy

   "use client";
   
   import { useState } from "react";
   
   export function ContactForm() {
     const [status, setStatus] = useState<"idle" | "sent" | "error">("idle");
   
     async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
       event.preventDefault();
       const form = event.currentTarget;
       const res = await fetch(form.action, {
         method: "POST",
         body: new FormData(form),
         headers: { Accept: "application/json" },
       });
       setStatus(res.ok ? "sent" : "error");
     }
   
     return (
       <form action="https://send.webforms.to/wft_your_key" method="POST" onSubmit={onSubmit}>
         <input name="email" type="email" required />
         <textarea name="message" required />
         <button type="submit">Send</button>
         {status === "sent" ? <p role="status">Sent.</p> : null}
       </form>
     );
   }

2. 02Create the channel webhook

   In Discord, open Channel Settings, then Integrations, then Webhooks, create one and copy the URL into a Discord destination on the form.

What is different about Next.js and Discord