netlify-nextjs.html

<form
  name="waitlist"
  data-netlify="true"
  netlify-honeypot="bot-field"
  className="bg-primary p-10 mt-4 rounded shadow-md"
  onSubmit={(e) => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "waitlist", email }),
    })
      .then(() => {
        setShowConfetti(true);
        setFlag();
      })
      .catch(() => null);
    e.preventDefault();
  }}
>
  <input type="hidden" name="form-name" value="waitlist" />
  <div className="">
    <div className="grid grid-cols-1 md:grid-cols-2 gap-1 items-end">
      <div className="grid grid-cols-1 gap-6">
        <div className="block">
          <label className="hidden" htmlFor="email">
            <span className="text-gray-700">Email address</span>
          </label>
          <input
            required
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            id="email"
            className="mt-0 bg-white block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
            placeholder="Enter your email"
            name="email"
          />
        </div>
      </div>
      <div className="grid grid-cols-1 gap-0">
        <div className="block">
          <div className="mt-2 w-full">
            <div>
              <button
                type="submit"
                className="text-xl text-black bg-white w-full border-black uppercase"
              >
                Join waiting list
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>