v0 contact form that sends email (Next.js on Vercel)

Add a contact page with a form that emails me through FormSMTP.

- Use a Server Action. Read the API key from process.env.FORMSMTP_API_KEY
  on the server only; never expose it to the client.
- The action POSTs to https://app.formsmtp.com/api/v1/send with the header
  Authorization: Bearer <FORMSMTP_API_KEY> and a JSON body:
  { to: "you@yourdomain.com", replyTo: <visitor email>,
    subject: "New message from <visitor name>", text: <message> }.
- The response is { success: true, messageId } or { success: false, error }.
  Return { ok: true } or { ok: false, error } to the form.
- Add a hidden honeypot field named "company"; if it's filled in, return
  { ok: true } without sending.
- Build the form with shadcn/ui (Label, Input, Textarea, Button) and
  useActionState for the pending, success and error states.

// app/contact/actions.ts
"use server";

export type ContactState = { ok: boolean; error?: string } | null;

export async function sendContact(_: ContactState, formData: FormData): Promise<ContactState> {
  if (formData.get("company")) return { ok: true }; // honeypot: bots fill it in

  const name = String(formData.get("name") || "").trim();
  const email = String(formData.get("email") || "").trim();
  const message = String(formData.get("message") || "").trim();
  if (!name || !email || !message) return { ok: false, error: "Please fill in every field." };

  const res = await fetch("https://app.formsmtp.com/api/v1/send", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.FORMSMTP_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      to: "you@yourdomain.com",
      replyTo: email,
      subject: `New message from ${name}`,
      text: message,
    }),
  });
  const data = await res.json();
  if (!data.success) {
    console.error("FormSMTP:", data.error); // the details stay in your server logs
    return { ok: false, error: "Sorry, your message couldn't be sent. Please try again later." };
  }
  return { ok: true };
}

// app/contact/page.tsx
"use client";

import { useActionState } from "react";
import { sendContact } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function ContactPage() {
  const [state, action, pending] = useActionState(sendContact, null);

  if (state?.ok) return <p className="p-6">Thanks! We'll get back to you soon.</p>;

  return (
    <form action={action} className="mx-auto grid max-w-md gap-4 p-6">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" name="name" autoComplete="name" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" name="email" type="email" autoComplete="email" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="message">Message</Label>
        <Textarea id="message" name="message" rows={5} required />
      </div>
      <input name="company" className="hidden" tabIndex={-1} autoComplete="off" />
      <Button type="submit" disabled={pending}>{pending ? "Sending…" : "Send message"}</Button>
      {state?.error && <p role="alert" className="text-sm text-destructive">{state.error}</p>}
    </form>
  );
}

"use client";
import { useState } from "react";

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

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const res = await fetch("https://app.formsmtp.com/api/v1/form/" + process.env.NEXT_PUBLIC_FORMSMTP_FORM_KEY, {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(e.currentTarget))),
    });
    setStatus((await res.json()).success ? "sent" : "error");
  }

  if (status === "sent") return <p>Thanks! Message sent.</p>;
  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input name="_gotcha" className="hidden" tabIndex={-1} autoComplete="off" />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p role="alert">Something went wrong. Please try again.</p>}
    </form>
  );
}